0

我有一个包含 20 个输入字段的表单。每个输入字段都在一个 DIV 内。我有一个脚本，它通过 keyup 函数以及其他两个 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");
       }
    });
});
4

3 回答 3

2

如果您希望所有 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 也改变颜色，你需要给它们一个 class/id，或者知道它们相对于input-div. 如果没有看到您的 html，我无法帮助您。

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

于 2012-04-09T17:46:16.457 回答
0

Normal jQuery Approach

Here are my suggestions for a normal jQuery approach. We can clean up the code a whole bunch using these basic ideas.

  1. Use @Adil's solution to add a class to reference all of your inputs at once or even just $("input[type=text]") or whatever.
  2. Use a .toggleClass() to handle the styling!

Example JS:

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

Example CSS:

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

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

This keeps your styling in your stylesheet where they belong. toggleClass also keeps your code cleaner.

Pure CSS Approach

If you ever get to drop older browsers and want to use pure CSS styling it shouldn't be much a stretch as it seems you're doing something like this. Check out this article on css-tricks about styling placeholder text:

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

:-moz-placeholder {
   color: gray;
   background: black;
}
于 2012-04-09T17:41:14.963 回答
0

向输入添加一个类并将#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");
}

});
于 2012-04-09T17:30:23.760 回答