投稿2017/03/18 03:58
編集2017/03/18 05:20動的に切り替わる特定のstyle属性の要素のクラスを切り替えたいです。
具体的構成は以下の通りです。
lang
1<input type="text" name="name1" value="" style="background-color: rgb(255, 221, 221);" class="hoge1"> 2<input type="text" name="name2" value="" style="background-color: rgb(255, 255, 255);" class="hoge1 hoge2"> 3<input type="text" name="name3" value="" style="background-color: rgb(255, 221, 221);" class="hoge1"> 4<input type="text" name="name4" value="" style="background-color: rgb(255, 255, 255);" class="hoge1 hoge2"> 5<label style="background-color: rgb(255, 221, 221);" class="hoge1"><input name="check1" type="checkbox" >texttexttext</label> 6<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」のクラスを付与したいです。
デフォルトでの指定は以下の記述で上手く動作したのですが、
lang
1$(function () { 2$("*").each(function(){ 3if($(this).css("background-color") == "rgb(255, 221, 221)"){ 4$(this).addClass("hoge1"); 5} 6if($(this).css("background-color") == "rgb(255, 255, 255)"){ 7$(this).addClass("hoge1,hoge2"); 8} 9}); 10});
動的な切り替え方法が分かりませんでした。
ご教授の程よろしくお願いいたします。
可能であればJqueryでの記述が有り難いです。
※ちなみに、一部自動入力部分があります。
例：name="name1"に氏（漢字）が入力された場合、name="name3"には氏（カタカナ）が自動入力される等。
その際当然name3も自動で「background-color: rgb(255, 255, 255);」に切り替わります。
質問内容に関係ないかもしれませんが念のため共有いたします。
=追記=
今回既存ページの改修のためinlineのstyle属性を外部cssなどに変更したり、html構成を変えるなどの前提条件の変更はできないので上記構成で実現可能な方法でご教授頂ければ有り難いです。
回答3件
0
フォームのバリデーションでスタイルが変わるとのことですから、keyupやclickイベントを拾って、質問のコードを実行すればいいかもしれませんね。
ただ、あまり筋はよくないと思いますので、できればバリデーションのコードに組み込む形にした方がいいかとは思います。
投稿2017/03/18 04:56
総合スコア36074
0
こんな感じかなぁ。
JavaScript
1$( function () { 2 $( 'input, select, textarea' ).on( 'input' add_remove ); 3 function add_remove() { 4 $( 'label, input, select, textarea' ).each( function() { 5 var $_t = $( this ), bg = $_t.css( 'background-color' ); 6 if ( bg == 'rgb(255, 221, 221)' ) { 7 $_t.addClass( 'hoge1' ); 8 } else if( bg == 'rgb(255, 255, 255)' ) { 9 $_t.addClass( 'hoge1 hoge2' ); 10 } else { 11 $_t.removeClass( 'hoge1 hoge2' ); 12 } 13 }); 14 } 15 add_remove(); 16} ); // 未テスト
投稿2017/03/18 07:55
総合スコア69398
0
ベストアンサー
要素の中に style 属性を書くと可読性が悪く、メンテナンス性を著しくそこなうので、HTMLを変更。
<input type="checkbox"> の name は name[] のように書くのが基本
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 input[type=text], 8 input[type=radio], 9 input[type=checkbox] { 10 background-color: rgb(255, 255, 255); 11 } 12 .required { 13 background-color: rgb(255, 221, 221); 14 } 15 </style> 16 </head> 17 <body> 18 <p> 19 <input type="text" name="name1" value="" class="required"> 20 </p> 21 <p> 22 <input type="text" name="name2" value="" class="required"> 23 </p> 24 <p> 25 <input type="text" name="name3" value="" class="required"> 26 </p> 27 <p> 28 <input type="text" name="name4" value="" class="required"> 29 </p> 30 <fieldset class="required"> 31 <label> 32 <input name="check[]" value="1" type="checkbox"> check1 33 </label> 34 <label> 35 <input name="check[]" value="2" type="checkbox"> check2 36 </label> 37 <label> 38 <input name="check[]" value="3" type="checkbox"> check3 39 </label> 40 </fieldset> 41 <fieldset class="required"> 42 <label> 43 <input name="radio" type="radio" value="1"> radio1 44 </label> 45 <label> 46 <input name="radio" type="radio" value="2"> radio2 47 </label> 48 <label> 49 <input name="radio" type="radio" value="3"> radio3 50 </label> 51 </fieldset> 52 53 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 54 <script type="text/javascript"> 55 $(function () { 56 $('.required').each(function () { 57 var $$ = $(this); 58 if ('text' === $$.prop('type')) { 59 $$.on('change', function () { 60 if ('' !== $(this).val()) { 61 $(this).removeClass('required'); 62 } else { 63 $(this).addClass('required'); 64 } 65 }); 66 } 67 if ($$.find(':checkbox, :radio').length > 0) { 68 $$.find(':checkbox, :radio').on('click', function () { 69 if ($$.find(':checkbox, :radio').filter(':checked').length) { 70 $$.removeClass('required'); 71 } else { 72 $$.addClass('required'); 73 } 74 }); 75 } 76 }); 77 }); 78 </script> 79 </body> 80</html>
投稿2017/03/18 04:43
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/18 07:39
2017/03/18 09:35
2017/03/19 11:03