お世話になっております。
javascriptblurやchangeについてお伺いしたいことがございます。
下記コードを今コーディングしているのですが、
selectboxの入力変化に応じて動的に入力項目の背景色変更を行いたいと思っています。
ですが下記コードですと、selectboxを変更した後に、textboxにカーソルを合わせると、
selectboxに応じていないところまでピンク色が変わってしまいます。
やりたいこと
- サンプル1を選択しているとき
テスト、テスト2の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持
- サンプル2を選択しているとき
テスト3、テスト4の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持
javascript初心者のため、うまく組めていないのだと思いますが、ご教授願います。
乱雑なコードで申し訳ございませんが下記コードがそのものです。
HTML
1<html> 2<head> 3 <title>タイトル</title> 4 <script src="../js/1.4.2jq.js"></script> 5 <script type="text/javascript" src="../js/example1.js"></script> 6</head> 7 8<body bgcolor=white background=""> 9 <h1>テスト</h1> 10 11 <select name = 'iikanji' id = 'iikanji'> 12 <option value="0">サンプル1</option> 13 <option value="1">サンプル2</option> 14 <option value="2">サンプル3</option> 15 </select><br><br><br><br><br> 16 <br> 17 テスト 18 <input type="text" name="test1"><br> 19 テスト2 20 <input type="text" name="test2"><br> 21 テスト3 22 <input type="text" name="test3"><br> 23 テスト4 24 <input type="text" name="test4"><br> 25 26 <input type="text"> 27 <input value="dummy" type="button"> 28 29</body> 30</html> 31
javascript
1 2$(function(){ 3 4 5 $('input[type=text]').css({ 6 backgroundColor: '#fff', 7 border: '#666666 1px solid' 8 }); 9 10 11 colorchange = aaa(); 12 $('select[name = iikanji]').change(function(){ 13 14 $('input').each(function(){ 15 16 if(this.value == ""){ 17 $(this).css("background-color","#ffffff"); 18 } 19 }); 20 21 colorchange = aaa(); 22 console.log(colorchange); // 出力 23 bbb(colorchange); 24 }); 25 bbb(colorchange); 26}); 27 28 29 30 31// $(function(){ 32// $("input").blur(function () { 33// console.log(this.type+" lost focus."); 34// //alert('aaaaaaaaaaa'); 35// }); 36// }); 37 38 39function aaa (){ 40 41 var colorchange = []; 42 var val = $('[name=iikanji]').val(); 43 44 switch(val){ 45 case "0": 46 colorchange = ['test1','test2']; 47 break; 48 case "1": 49 colorchange = ['test4','test3']; 50 break; 51 52 case "2": 53 colorchange = ['test1']; 54 break; 55 case "3": 56 colorchange = ['test2']; 57 break; 58 } 59 return colorchange; 60 61}; 62 63function bbb (colorchange){ 64 65 for (var i = 0; i <= colorchange.length; i++) { 66 67 $('input[name = ' + colorchange[i] + ']').each(function(){ 68 if(this.value == ""){ 69 $(this).css("background-color","#ffebeb"); 70 } else { 71 $(this).css("background-color","#ffffff"); 72 } 73 }); 74 } 75 for (var i = 0; i <= colorchange.length; i++) { 76 $('input[name = ' + colorchange[i] + ']').blur(function(){ 77console.log('aaa' +colorchange[i]); // 出力 78if(this.value == ""){ 79 $(this).css("background-color","#ffebeb"); 80} else { 81 $(this).css("background-color","#ffffff"); 82} 83}); 84 } 85 for (var i = 0; i <= colorchange.length; i++) { 86 $('input[name = ' + colorchange[i] + ']').focus(function(){ 87 if(this.value == ""){ 88 $(this).css("background-color","#ffebeb"); 89 } else { 90 $(this).css("background-color","#ffffff"); 91 } 92 }); 93 } 94}; 95
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。