16

我对 jQuery 有疑问。我有下面的代码可以正常工作；它input border-color根据键入和输入的值而变化。但是，如果在input页面加载时 in 的值不会改变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");
}

});
4

3 回答 3

11

只需触发事件：

$("input").change(function() {
    // ...
}).trigger("change");

演示：http: //jsfiddle.net/9B5SX/1/

于 2013-05-18T18:49:45.480 回答
9

我建议：

$('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-widthof5px和border-styleof 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 小提琴演示。

参考：

于 2013-05-18T18:53:52.327 回答
1

这里同样的问题。在我的情况下，输入是一个表格列，它显示在每个表格行中。使用下一个代码，我设法只更改了一种输入颜色，而不是在我更改一个值时全部更改。

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

         });

希望能帮助到你

于 2017-05-10T10:37:26.137 回答