如何改變輸入邊框顏色，與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(); 

JS Fiddle demo。

雖然說實話，因爲每情況似乎需要一個5px和border-width的solidborder-style，你可以設置在CSS的部分：

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

而且只需在jQuery的更新border-color ：

$('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

同樣的問題在這裏。在我的情況下，輸入是一個表列，它顯示在每個表格行中。通過下一個代碼，我設法只更改一個輸入顏色，而不是所有當我將值更改爲一個時。

  $('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'); 
      } 

     }); 

希望它可以幫助