Question

我有一个包含20个输入字段的表单。每个输入字段都在DIV中。我有一个脚本，通过键盘功能和其他两个DIV标签来改变DIV的背景颜色。

不是为每个DIV和输入复制脚本20次，是否可以重写脚本来完成所有DIV及其输入？

$(document).ready(function(){
    $("#id").keyup(function() {
       if($("#id").val().length > 0) $("#in1, #nu1, #lw1, #id").css("background-color","#2F2F2F").css("color", "#FFF");
       else {
 if($("#id").val().length == 0) $("#in1, #nu1, #lw1, #id").css("background-color","#E8E8E8").css("color", "#000");
       }
    });
});

Answer 1

如果你希望所有的div一次改变颜色，那么这里的其他答案是正确的，但我不知道这就是你要求的。

我的假设是你有多段代码：

<div>
   <input>
</div>

当输入长于0时，您希望容器div改变颜色。如果是这样，这就是你可以做的：

首先，给div一个公共类，例如input-div：

<div class="input-div">
   <input>
</div>

创建css类：

.input-div {
    color: #000;
    background-color: #E8E8E8
}
.highlight {
    color: #FFF;
    background-color: #2F2F2F
}

然后，使用jQuery调用来应用/删除每个案例的突出显示类：

$(".input-div input").keyup(function() {
   // Get parent div
   var myParent = $(this).parent('.input-div');

   // If input length is > 0, highlight the parent
   if($(this).val().length > 0) {
       myParent.addClass('highlight');
   } else {
       myParent.removeClass('highlight');
   }
});

您不需要额外的if，因为如果长度不是> 0，那么它将是== 0。如果您希望其他div也改变颜色，您需要给它们一个类/ id，或者知道它们相对于input-div的位置。如果没有看到您的HTML，我无法帮助您。

演示：http://jsfiddle.net/QB52B/

Answer 2

在输入中添加一个类，并用.classname替换#id。这些方面的东西：

$(".classname").keyup(function() {
if($(this).val().length > 0) $(this).parent().css("background-color",
 "#2F2F2F").css("color", "#FFF");
 else {
 if($(".classname").val().length == 0) $(this).parent().css("background-color",
 "#E8E8E8").css("color", "#000");
}

});

Answer 3

正常的jQuery方法

以下是我对普通jQuery方法的建议。我们可以使用这些基本想法清理整个代码。

使用@Adil的解决方案添加一个类，一次引用所有输入，甚至只引用$("input[type=text]")或其他任何内容。
使用.toggleClass()处理样式！

示例JS：

var $inputs = $("input[type=text]"); // or replace with className
$inputs.keyup(function() {
   var $this = $(this);
   $this.toggleClass("isEmpty", $this.val().length > 0)
});

示例CSS：

input[type=text] { /* or replace with className */
  color: black;
  background: gray;
}

.isEmpty {
   color: gray;
   background: black;
}

这样可以将样式保存在样式表中。 toggleClass还可以让您的代码更清晰。

纯CSS方法

如果你想放弃旧的浏览器并且想要使用纯CSS样式，它应该不会太多，因为你似乎正在做这样的事情。看看这个article on css-tricks about styling placeholder text：

::-webkit-input-placeholder {
   color: gray;
   background: black;
}

:-moz-placeholder {
   color: gray;
   background: black;
}

更改表单中所有输入的DIV背景颜色

3 个答案:

正常的jQuery方法

纯CSS方法