遍历 Div ID 数组并更改其 CSS（一个接一个）答案

【问题标题】：Iterate through Array of Div IDs and change their CSS (One by One)遍历 Div ID 数组并更改其 CSS（一个接一个）
【发布时间】：2017-01-21 11:24:08
【问题描述】：

我正在尝试遍历 Div ID 数组并一个接一个地更改它们的 CSS（背景颜色）。我知道如何迭代/循环遍历数组，但它们都被选中并一次性添加 CSS（我唯一的问题是延迟效果，以便每个 div 一个接一个地更改，而不是一次更改。）一点帮助将不胜感激。

    $("#light").click(function(){

            for (var i=0; i < randomArray.length; i++) {

                $("#" + randomArray[i]).css("backgroundColor", "Black"); //How not to change the color at once, but one by one?//

            }
        });

【问题讨论】：

试试$("#" + randomArray[i])[0].css("backgroundColor", "Black");

标签： javascript jquery css arrays

【解决方案1】：

或者你可以使用 css 动画延迟，它更干净更快。

var randomArray = ["elem1", "elem2", "elem3"];

$("#light").click(function(){

     for (var i=0; i < randomArray.length; i++) {

         $("#" + randomArray[i]).addClass("fade-"+i);

     }
});

现在您有了一个类列表，假设：fade-1、fade-2、fade-3。

在css中：

.fade-0,.fade-1,.fade-2{
   background-color: black;
   transition: background-color 1s;
}
.fade-1{
   transition-delay: 1s;
}
.fade-2{
   transition-delay: 2s;
}

【讨论】：

【解决方案2】：

试试这样的

var ctr = 0;
$("#light").click(function(){
      changeCss(ctr);
})
function changeCss(num){
if(ctr < randomArray.length){
     $("#" + randomArray[num]).css("backgroundColor", "Black");
      ctr++;
         setTimeout(function(){changeCss(ctr)},2000) 
} 
}

【讨论】：