如何使用 jQuery 根据其值更改输入边框颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16627760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change input border-color, with jQuery, depending on its value?
提问by Lasha
I have question about jQuery. I have code below which works fine; it changes inputborder-colordepending on its value, which is typed and entered. But if in input's value on page-load it does not change that border-color. How can I make the border-colorchange from the beginning, following page-load?
我有关于 jQuery 的问题。我有下面的代码可以正常工作；它inputborder-color根据键入和输入的值而变化。但是如果 ininput在页面加载时的值不会改变它border-color。如何在border-color页面加载后从头开始进行更改？
Thank you :)
谢谢 ：）
<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");
}
});
采纳答案by VisioN
Just trigger the event:
只需触发事件：
$("input").change(function() {
// ...
}).trigger("change");
回答by David says reinstate Monica
I'd suggest:
我建议：
$('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();
Though honestly, given that everysituation seems to require a border-widthof 5pxand border-styleof solid, I'd set those parts in the CSS:
老实说，鉴于每种情况似乎都需要border-widthof5px和border-styleof solid，我会在 CSS 中设置这些部分：
input {
border-width: 5px;
border-style: solid;
}
And simply update the border-colorin the jQuery:
并简单地更新border-colorjQuery 中的：
$('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();
And, finally, just because I sometimes can't help myself (and while this approach canbe taken, it's not one I can honestly recommend...), with added conditional operators:
最后，仅仅因为我有时无法帮助自己（虽然可以采取这种方法，但我不能诚实地推荐这种方法......），并添加了条件运算符：
$('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();
References:
参考：
回答by Berintan Anca
Same issue here. On my case, the input was a table column and it was displayed for every table row. With the next code I managed to change only one input color, not all when I changed the value for one.
同样的问题在这里。就我而言，输入是一个表列，它为每个表行显示。使用下一个代码，我只更改了一种输入颜色，而不是更改一种颜色时的所有颜色。
$('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');
}
});
Hope it helps
希望能帮助到你
