How to change input border-color, with jQuery, depending on its value?

Question

I have question about jQuery. I have code below which works fine; it changes input border-color depending on its value, which is typed and entered. But

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

JS Fiddle demo.

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:

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

And simply update the border-color in the 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.

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

JS Fiddle demo.

References:

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