jQueryを使用して、値に応じて入力枠の色を変更する方法は？

Question

jQueryについて質問があります。以下のコードはうまく動作しています。値に応じてinputborder-colorが変更され、入力されて入力されます。しかし、inputの値がページロードの場合は、それはborder-colorに変更されません。 border-colorをページロード後の最初から変更するにはどうすればよいですか？

ありがとうございました:)

<input type="text" class="col" value=""> 


// When the <input>'s value changes 
$("input").change(function() { 

// If the value is less than 7, add a red border 
if ($(this).val() < 7) { 
    $(this).css("border", "5px solid red"); 
} 

// Else if the value is equal to 7, add a green border 
else if ($(this).val() == 7) { 
    $(this).css("border", "5px solid green"); 
} 

// Else if the value is greater than 7, add an orange border 
else if ($(this).val() > 7) { 
    $(this).css("border", "5px solid orange"); 
} 

// Else if the value is anything else, add a black border 
else { 
    $(this).css("border", "5px solid black"); 
} 

}); 

Answer 1

をちょうどイベントをトリガ：

$("input").change(function() { 
    // ... 
}).trigger("change"); 

DEMO：http://jsfiddle.net/9B5SX/1/

Answer 2

私がお勧めしたい：

$('input').on('change', function(){ 
    var v = parseInt(this.value, 10); 
    $(this).css('border', function(){ 
     if (v < 7) { 
      return '5px solid #f00'; 
     } 
     else if (v == 7) { 
      return '5px solid #0f0'; 
     } 
     else if (v > 7) { 
      return '5px solid #f90'; 
     } 
     else { 
      return '5px solid #000'; 
     } 
    }); 
}).change(); 

を210

JS Fiddle demo。

input { 
    border-width: 5px; 
    border-style: solid; 
} 

を単にjQueryのでborder-colorを更新：すべての状況はsolidの5pxのborder-widthとborder-styleを必要とするように思われること、私はCSSでそれらの部品を設定したい与え

正直ものの、 ：

$('input').on('change', function(){ 
    var v = parseInt(this.value, 10); 
    $(this).css('border-color', function(){ 
     if (v < 7) { 
      return '#f00'; 
     } 
     else if (v == 7) { 
      return '#0f0'; 
     } 
     else if (v > 7) { 
      return '#f90'; 
     } 
     else { 
      return '#000'; 
     } 
    }); 
}).change(); 

JS Fiddle demo

そして、最後に、私は時々自分自身を助けることができないため、追加条件演算子と、（このアプローチが撮影することができながら、それは一つではないのです、私は正直に...お勧めすることができます）：

$('input').on('change', function(){ 
    var v = parseInt(this.value, 10); 
    $(this).css('border-color', function(){ 
     var v = parseInt(this.value,10); 
     return isNaN(v) ? '#000' : v < 7 ? '#f00' : v == 7 ? '#0f0' : '#f90'; 
    }); 
}).change(); 

を

JS Fiddle demo。

参考文献：

• change()。
• on()。
• parseInt()。

Answer 3

ここで同じ問題が発生します。私のケースでは、入力は表の列で、すべての表の行に表示されていました。次のコードでは、1つの入力カラーのみを変更することができました。

  $('input[type=number]').each(function() { 

      /* Change border color depending on the input value */ 
      var value = parseInt(this.value, 10); 
      if (value != 0) { 
       $(this).css('border-color', function() { 
        return value ? 0 : '#bfbfbf', '#f32d83'; 

       }); 

      } 
      else { 
       $(this).css('border-color', '#bfbfbf'); 
      } 

     }); 

は、それが