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

Question

当我返回并删除输入字段空白的数据时，除非我键入 A“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 指出的那样，您不需要测试lengthelse 条件中的值。

示例小提琴

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

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

Answer 2

您可能想使用keyup来说明刚刚输入的字符：

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

这是一个jsFiddle来演示。

Answer 3

这个应该可以...

<script>

$(document).ready(function() {

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

</script>

Answer 4

在您的情况下，'keypress' 事件在 input.val().length 更改之前已调用。并且您的代码运行选择器检索五次，插入一次。

看看这段代码，它工作正常：

html:

<input id="id" type="text" autocomplete="off">
<div class="in"></div>​​​

CSS：

.in {width:200px; height:20px; background-color:#grey;}
.in-red {background-color:red;}

​ js：

$(function(){
    var $in = $('.in');
    $('#id').on('keyup', function(){
        $this = $(this);
        if ($this.val().length > 0) {
            $in.addClass('in-red');
        } else {
            $in.removeClass('in-red');
        }
    });
});​

您可以在http://jsfiddle.net/Qhkev/1/上对其进行测试

Answer 5

使用键位

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

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

 });
 });
 </script>