javascript - 更改 DIVS 数组的样式

Question

我在名为“lights”的数组中有 100 个 DIVS，并使用唯一 ID 附加到页面。其中一些 DIVS 也在另一个名为“卡住”的数组中。

如何更改“lights”中 DIVS 的背景颜色，而不更改“frozen”数组中的 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() 轻松执行您想要的操作就像下面的例子一样。

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

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

.frozen {
  background-color : #F00;  
}

<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" />