Как изменить цвет границы ввода с помощью jQuery в зависимости от его значения?

у меня вопрос о jQuery. У меня есть код, ниже которого работает нормально; он меняется input border-color в зависимости от его значения, которое набирается и вводится. Но если в input ' s значение на странице-загрузка не изменяет это 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");
}

});
9
colors input jquery

3 ответов

просто запустите событие:

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

демо: http://jsfiddle.net/9B5SX/1/

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 Fiddle demo.

хотя, честно говоря, учитывая это ситуация, похоже, требует border-width of 5px и border-style of 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 Fiddle demo.

и, наконец, просто потому, что я иногда не могу помочь себе (и в то время как это подходи!--19-- > can будьте приняты, это не тот, который я могу честно рекомендовать...), с добавленными условными операторами:

$('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 Fiddle demo.

ссылки:

6

та же проблема здесь. В моем случае вход был столбцом таблицы, и он отображался для каждой строки таблицы. Со следующим кодом мне удалось изменить только один входной цвет, а не все, когда я изменил значение на один.

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

         });

надеюсь, что это помогает

1