如何使用jQuery更改输入border-color,具体取决于其值？

Question

我对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");
}

});

Answer 1

只需触发事件:

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

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

Answer 2

我建议:

$('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小提琴演示.

参考文献:

• change().
• on().
• parseInt().