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-widthで of5pxとborder-styleofが必要なように思われるため、solidこれらの部分を CSS に設定します。

input {
    border-width: 5px;
    border-style: solid;
}

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();

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 に答える