jquery - 需要脚本通过输入更改 div 背景

Question

当我返回并删除数据并将输入字段留空时，背景不会恢复到原来的颜色，除非我输入“0”。

我需要 DIV 的背景颜色在空白时恢复为原始颜色。

我做错了什么？

<script>
$(document).ready(function() {

    $("#id").keypress(function() {
        if ($("#id").val().length > 0) $("#in").css("background-color", "red");
        else {
            if ($("#id").val().length == 0) $("#in").css("background-color", "grey");
        }
    });

});​
</script>

Answer 1

问题是因为您使用的是在执行按键操作之前调用的keypress。如果您使用 keyup 这将起作用:

$("#id").keyup(function() {
    if ($(this).val().length > 0) {
        $("#in").css("background-color", "red");
    }
    else {
        $("#in").css("background-color", "grey");
    }
});

此外，正如 @mblase75 指出的那样，您不需要测试 else 条件中值的长度。

Example fiddle

如果您想进一步简化此代码，您可以简单地使用以 .val().length 作为条件的三元语句，因为正整数将等于 true:

$("#id").keyup(function() {
    $(this).css("background-color", $(this).val().length ? "red" : "grey");
});