質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17531questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7110questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

動的に切り替わる特定のstyle属性の要素のクラスを切り替えたい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 892

castail

score 117

動的に切り替わる特定のstyle属性の要素のクラスを切り替えたいです。

具体的構成は以下の通りです。

<input type="text" name="name1" value="" style="background-color: rgb(255, 221, 221);" class="hoge1">
<input type="text" name="name2" value="" style="background-color: rgb(255, 255, 255);" class="hoge1 hoge2">
<input type="text" name="name3" value="" style="background-color: rgb(255, 221, 221);" class="hoge1">
<input type="text" name="name4" value="" style="background-color: rgb(255, 255, 255);" class="hoge1 hoge2">
<label style="background-color: rgb(255, 221, 221);" class="hoge1"><input name="check1" type="checkbox" >texttexttext</label>
<label style="background-color: rgb(255, 255, 255);" class="hoge1 hoge2"><input name="check2" type="checkbox">texttexttext</label>


一部必須入力要素において、未入力時style属性に「background-color: rgb(255, 221, 221);」が付与されているのですが、
入力、チェック済みの場合動的に「background-color: rgb(255, 255, 255);」へ切り替わります。
その切り替えを利用し、「background-color: rgb(255, 221, 221);」時には「hoge1」のクラスを、「background-color: rgb(255, 255, 255);」時には「hoge2」のクラスを付与したいです。

デフォルトでの指定は以下の記述で上手く動作したのですが、

$(function () {
$("*").each(function(){
if($(this).css("background-color") == "rgb(255, 221, 221)"){
$(this).addClass("hoge1");
}
if($(this).css("background-color") == "rgb(255, 255, 255)"){
$(this).addClass("hoge1,hoge2");
}
});
});

動的な切り替え方法が分かりませんでした。
ご教授の程よろしくお願いいたします。
可能であればJqueryでの記述が有り難いです。

※ちなみに、一部自動入力部分があります。
例:name="name1"に氏(漢字)が入力された場合、name="name3"には氏(カタカナ)が自動入力される等。
その際当然name3も自動で「background-color: rgb(255, 255, 255);」に切り替わります。
質問内容に関係ないかもしれませんが念のため共有いたします。

=追記=
今回既存ページの改修のためinlineのstyle属性を外部cssなどに変更したり、html構成を変えるなどの前提条件の変更はできないので上記構成で実現可能な方法でご教授頂ければ有り難いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

要素の中に style 属性を書くと可読性が悪く、メンテナンス性を著しくそこなうので、HTMLを変更。
<input type="checkbox"> の name は name[] のように書くのが基本

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            input[type=text],
            input[type=radio],
            input[type=checkbox] {
                background-color: rgb(255, 255, 255);
            }
            .required {
                background-color: rgb(255, 221, 221);
            }
        </style>
    </head>
    <body>
        <p>
            <input type="text" name="name1" value="" class="required">
        </p>
        <p>
            <input type="text" name="name2" value="" class="required">
        </p>
        <p>
            <input type="text" name="name3" value="" class="required">
        </p>
        <p>
            <input type="text" name="name4" value="" class="required">
        </p>
        <fieldset class="required">
            <label>
                <input name="check[]" value="1" type="checkbox"> check1
            </label>
            <label>
                <input name="check[]" value="2" type="checkbox"> check2
            </label>
            <label>
                <input name="check[]" value="3" type="checkbox"> check3
            </label>
        </fieldset>
        <fieldset class="required">
            <label>
                <input name="radio" type="radio" value="1"> radio1
            </label>
            <label>
                <input name="radio" type="radio" value="2"> radio2
            </label>
            <label>
                <input name="radio" type="radio" value="3"> radio3
            </label>
        </fieldset>

        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('.required').each(function () {
                    var $$ = $(this);
                    if ('text' === $$.prop('type')) {
                        $$.on('change', function () {
                            if ('' !== $(this).val()) {
                                $(this).removeClass('required');
                            } else {
                                $(this).addClass('required');
                            }
                        });
                    }
                    if ($$.find(':checkbox, :radio').length > 0) {
                        $$.find(':checkbox, :radio').on('click', function () {
                            if ($$.find(':checkbox, :radio').filter(':checked').length) {
                                $$.removeClass('required');
                            } else {
                                $$.addClass('required');
                            }
                        });
                    }
                });
            });
        </script>
    </body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/18 13:55 編集

    早速のご回答ありがとうございます。

    おっしゃる通り、style属性直書きでの切り替えは好ましくないことは理解しているのですが、今回既存ページへの改修でこのstyle属性での制御は元からの仕様のためその部分に変更を加えることが出来ない状態です。

    その制限で何卒ご教授いただけないでしょうか?
    よろしくお願いいたします。

    キャンセル

  • 2017/03/18 13:57

    じゃあ、ページの読み込み時に、style 属性とってしまえばいいじゃない。

    キャンセル

  • 2017/03/18 14:02

    説明足らずで申し訳ございません。
    デフォルトで削除しても入力状況に応じて動的にstyleが付与されてしまうので、その切替に連動したclassの切り替え方法をご教授頂きたい次第です。

    キャンセル

  • 2017/03/18 14:04

    CSSの基本を思い返してください。classに割り当てられたスタイルと、style属性で割り当てられたスタイル、どちらが優先されますか?

    キャンセル

  • 2017/03/18 14:10

    > デフォルトで削除しても入力状況に応じて動的にstyleが付与されてしまう
    $('input').removeAttr('style');
    を最初に実行すれば、削除できるということ。

    キャンセル

  • 2017/03/19 20:04

    ご連絡が遅くなり申し訳ございません。

    ご回答ありがとうございます。
    この度は誠にありがとうございました。

    キャンセル

+1

フォームのバリデーションでスタイルが変わるとのことですから、keyupclickイベントを拾って、質問のコードを実行すればいいかもしれませんね。
ただ、あまり筋はよくないと思いますので、できればバリデーションのコードに組み込む形にした方がいいかとは思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/18 16:39

    ご回答ありがとうございます。

    なるほど、イベントメソッドを使用するのですね。

    $('input[type="text"],label').each(function(){
    $(this).on('click', function() {
    if($(this).css("background-color") == "rgb(255, 221, 221)"){
    $(this).removeClass("hoge1 hoge2");
    $(this).addClass("hoge1");
    }
    if($(this).css("background-color") == "rgb(255, 255, 255)"){
    $(this).removeClass("hoge1 hoge2");
    $(this).addClass("hoge1 hoge2");
    }
    });
    });

    そちらを参考に、上記記述で試しましたがうまく動作しませんでした。
    ご指導願えませんでしょうか?

    キャンセル

  • 2017/03/18 18:35

    クリックイベントだけでは足りないでしょうね……

    キャンセル

  • 2017/03/19 20:03

    ご連絡が遅くなり申し訳ございません。

    ご回答ありがとうございます。

    せっかくご回答頂きましたが今回は最初にご回答頂いた「Kosuke_Shibuya」さんをベストアンサーとさせて頂きます。

    この度は誠にありがとうございました。

    キャンセル

+1

こんな感じかなぁ。

$( function () {
    $( 'input, select, textarea' ).on( 'input' add_remove );
    function add_remove() {
        $( 'label, input, select, textarea' ).each( function() {
            var $_t = $( this ), bg = $_t.css( 'background-color' );
            if ( bg == 'rgb(255, 221, 221)' ) {
                $_t.addClass( 'hoge1' );
            } else if( bg == 'rgb(255, 255, 255)' ) {
                $_t.addClass( 'hoge1 hoge2' );
            } else {
                $_t.removeClass( 'hoge1 hoge2' );
            }
        });
    }
    add_remove();
} ); // 未テスト

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/19 20:02

    ご連絡が遅くなり申し訳ございません。

    ご回答ありがとうございます。

    ご指示のとおりですと、シンタックスエラーがでました。
    「'input' add_remove」→「'input',add_remove」のようですね。

    ただこちらでもlabelの処理がうまく行きませんでした。
    こちらの仕様or記述ミスの可能性もございますので引き続き検証したいと思います。

    ただ、せっかくご回答頂きましたが今回は最初にご回答頂いた「Kosuke_Shibuya」さんをベストアンサーとさせて頂きます。

    この度は誠にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17531questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7110questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。