我对jQuery的问题。 我有下面的代码的正常工作; 它改变input border-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");
}
});
只要触发事件：
$("input").change(function() {
// ...
}).trigger("change");
DEMO： 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提琴演示 。
虽然说实话，因为每一种情况似乎需要一个border-width的5px和border-style的solid ，你可以设置在CSS的部分：
input {
border-width: 5px;
border-style: solid;
}
而简单地更新border-color在jQuery的：
$('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提琴演示 。
参考文献：
这里同样的问题。 在我的情况下，输入是一个表柱上，并使其显示为每个表行。 随着未来的代码，我管理，当我一改值只改变一个输入颜色，不是全部。
$('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');
}
});
希望能帮助到你
