当var长度小于1时更改边框颜色

Question

var长度小于1时更改边框颜色？

http://jsfiddle.net/66chLg61/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#txt').keydown(function (e){
    if(e.keyCode == 13){
        var ex_se = $('#txt').val();
        var ex_se_lenght = ex_se.length;
        if(ex_se_lenght < '1')
            {
                // change border color id="txt" to red //
                alert('red');
            }
        else
            {
                // change border color id="txt" to black //
                alert('black');
            }
    }
})
});
</script>
<input type="text" id="txt"/>

Answer 1

试试这个：将$(window).laod更改为$(document).ready，并且将长度与字符串而不是整数进行比较，因此将if(ex_se_lenght < '1')更改为if(ex_se_lenght < 1)

注意-按下"回车"按钮后将显示警报，因为存在条件if(e.keyCode == 13)。

代码：

$(document).ready(function(){
$('#txt').keydown(function (e){
    if(e.keyCode == 13)
    {
        var ex_se = $(this).val();
        var ex_se_lenght = ex_se.length;
        if(ex_se_lenght < 1)
            {
                // change border color id="txt" to red //
                alert('red');
            }
        else
            {
                // change border color id="txt" to black //
                alert('black');
            }
    }
})
});

演示

正如@Danko所添加的，要添加边框颜色，请在css类下面创建，并添加/删除红色边框

.alert {
    outline:none;
    border:2px solid red;
}

和JQuery:

if(ex_se_lenght < 1)
{
    $(this).addClass('alert');
    alert('red');
}
else
{
    $(this).removeClass('alert');
    alert('black');
}

Danko演示

Answer 2

这样修改你的js：

$('#txt').keydown(function (e) {
    if (e.keyCode == 13) {
        var ex_se = $('#txt');
        var ex_se_lenght = ex_se.val().length;
        var color = ex_se_lenght < 1 ? 'red' : 'black';
        ex_se.css('border-color', color);
    }
});

演示：http://jsfiddle.net/lotusgodkk/66chLg61/11/

Answer 3

尝试

$(window).load(function () {
    $('#txt').keydown(function (e) {
        if (e.keyCode == 13) {
            var ex_se = $('#txt').val();
            var ex_se_lenght = ex_se.length;
            if (ex_se_lenght < '1') {
                // change border color id="txt" to red //
                $("#txt").removeClass("black").addClass("red");  // remove previous added class black
            } else {
                // change border color id="txt" to black //
                $("#txt").removeClass("red").addClass("black"); // remove previous added class red
            }
        }
    })
});

演示

Answer 4

您可以这样做：

if(ex_se_lenght < '1')
{
    // change border color id="txt" to red //
    $("#txt").css('border-color', 'red');
    alert('red');
}
else
{
    // change border color id="txt" to black //
    $("#txt").css('border-color', 'black');
    alert('black');
}

Fiddle。。。

已编辑：选择器错误