Question

我尝试迭代和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?//

            }
        });

Answer 1

尝试类似这样的内容

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) 
} 
}

Answer 2

或者你可以使用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;
}

迭代Div ID数组并更改CSS（逐个）

2 个答案: