[英]How to change input border-color, with jQuery, depending on its value?
I have question about jQuery. 我对jQuery有疑问。 I have code below which works fine; 我的代码在下面工作正常; it changes input
border-color
depending on its value, which is typed and entered. 它会根据input
border-color
更改input
border-color
input
border-color
将被输入并输入。 But if in input
's value on page-load it does not change that border-color
. 但是如果input
的值在页面加载时它不会改变border-color
。 How can I make the border-color
change from the beginning, following page-load? 如何在页面加载后从头开始改变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");
}
});
Just trigger the event: 只需触发事件:
$("input").change(function() {
// ...
}).trigger("change");
DEMO: http://jsfiddle.net/9B5SX/1/ 演示: http : //jsfiddle.net/9B5SX/1/
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 every situation seems to require a border-width
of 5px
and border-style
of solid
, I'd set those parts in the CSS: 老实说,鉴于每种情况似乎都需要5px
的border-width
和solid
border-style
,我会在CSS中设置这些部分:
input {
border-width: 5px;
border-style: solid;
}
And simply update the border-color
in the jQuery: 只需更新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();
And, finally, just because I sometimes can't help myself (and while this approach can be 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: 参考文献:
change()
. change()
。 on()
. on()
。 parseInt()
. parseInt()
。 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 希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.