如何使用jQuery更改输入border-color，具体取决于其值？
我对jQuery有疑问。 我的代码在下面工作正常; 它根据input border-color改变input border-color input border-color是输入的。 但是如果input的值在页面加载时它不会改变border-color 。 如何在页面加载后从头开始改变border-color ？
谢谢 ：）
// When the '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 orange"); } // Else if the value is anything else, add a black border else { $(this).css("border", "5px solid black"); } });
只需触发事件：
$("input").change(function() { // ... }).trigger("change");
演示： http ： //jsfiddle.net/9B5SX/1/
我建议：
$('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小提琴演示 。
老实说，鉴于每种情况似乎需要5px的border-width和solid border-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小提琴演示 。
而且，最后，仅仅因为我有时无法帮助自己（虽然这种方法可以采取，但我不能诚实地推荐……），添加条件运算符：
$('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小提琴演示 。
参考文献：
-
change()。 -
on()。 -
parseInt()。
同样的问题在这里 在我的情况下，输入是一个表列，并显示每个表行。 使用下一个代码，我设法只更改了一种输入颜色，而不是当我更改一个值时。
$('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'); } });
希望能帮助到你