Question

我在名为“灯光”的数组中有100个DIVS，并附加到具有唯一ID的页面。其中一些DIVS也在另一个名为“冻结”的数组中。

如何更改“灯光”中DIVS的背景颜色，而不是“冻结”数组中的div？

例如，要更改我将使用的所有div：

for(var l=0;l<LIGHTS_NUMOF;l++){

$("#light"+l).css("background-color", "#ff0000");

}

生成数组：

var LIGHTS_NUMOF = 100;
var lights = [];

for(var l=0;l<LIGHTS_NUMOF;l++){
    var newLight = $("<div class=\"light\" id=\"light"+l+"\"></div>");
    $(".lights").append(newLight);
    lights.push(newLight);
}

然而，这显然改变了所有的div。

如何避免更改“冻结”数组中的DIVS？

理想情况下，我想表达lights.backgroundcolor ='red'，其中DIV不会被“冻结”。

将DIV添加到'冻结'：

$( ".light" ).click(function() {
frozen.push(this);
});

Answer 1

如果您实际上正在查看DOM中的项目，您可以使用jQuery.not()轻松地执行您想要的操作，如下例所示。

＆＃13;

$(document).ready(function() {
  $("#changeLights").on("click", function() {
    $(".lights").not(".frozen").addClass("frozen");
  });
});

＆＃13;

div {
  height : 50px;
  width : 50px;
  background-color : #CCC;
  margin: 5px;
  float: left;
}

.frozen {
  background-color : #F00;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="lights"></div>
<div class="lights"></div>
<div class="lights frozen"></div>
<div class="lights"></div>
<div class="lights frozen"></div>
<div class="lights frozen"></div>
<input id="changeLights" type="button" value="Change" />

＆＃13;

Answer 2

试试这个：

for(var l=0;l<LIGHTS_NUMOF;l++){
    if(frozenArray.indexOf(lightsArray[l]) == -1){ // if id is not in frozen array
        $("#light"+l).css("background-color", "#ff0000");
    }
}

Answer 3

首先...... 尝试修改代码的这一部分

$(".light").click(function() {
    $(this).addClass("frozen");
});

然后为了让所有这些都没有冻结，请执行以下操作：

$(".light").not(".frozen").css("background-color", "#ff0000");

更改DIVS数组的样式

3 个答案: