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

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

将类添加到输入中，并将 #id 替换为 .classname。大致如下：

$(".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方法的建议。我们可以使用这些基本思想清理一大堆代码。

1. 使用 @Adil 的解决方案添加一个类来一次引用所有输入，甚至只是引用$("input[type=text]")或其他任何输入。
2. 使用.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样式，那应该不会太夸张，因为看起来你正在做这样的事情。查看这篇关于 css 技巧的文章 关于设置占位符文本样式：

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