Javascript 使用setTimeout临时更改div背景色

我尝试创建一种效果，在四个div中的每一个中循环，并将它们的颜色更改为绿色，然后再将其更改回原来的颜色并移动到下一个。现在它只是永久性地改变颜色。我不知道如何解决这个问题，以便在转到下一个元素之前颜色会发生变化，因为我正在“删除”之前的每个元素，以便正确循环。我可能有七件事做错了，如果有任何建议，我将不胜感激

这是一个正在工作的JSBin：

Javascript:

arrayCount=[1,2,3,4];
var secondPrint = function(){
  setTimeout(function(){
if (arrayCount.length>0){
      $("#button"+arrayCount[0]).attr("class", "sButton2");

     arrayCount.shift(1);
     secondPrint();
   }
}    ,1000);
  };

secondPrint();

CSS:

HTML:

1.
2.
3.
4.

您的逻辑在这里有点缺陷。更好的方法是使用

setInterval（）

每秒更新按钮的状态，在每次调用函数时移动到下一个按钮。试试这个：

var secondPrint = function() {
    var $buttons = $('.sButton');
    var $active = $buttons.filter('.sButton2');
    $active = (!$active.length || $active.is(':last')) ? $('.sButton:first') : $active.next();
    $buttons.removeClass('sButton2');
    $active.addClass('sButton2');
};

setInterval(secondPrint, 1000)
secondPrint();

我如何使它在一次迭代之后停止？我没有使用setInterval（），因为我不希望它永远持续下去

在这种情况下，如果出现

：last

条件，您只需修改逻辑检查以清除间隔，如下所示：

var interval;
var secondPrint = function() {
    var $buttons = $('.sButton');
    var $active = $buttons.filter('.sButton2');
    $buttons.removeClass('sButton2');
    if ($active.is(':last')) {
        clearInterval(interval);
        return;
    }

    $active = !$active.length ? $('.sButton:first') : $active.next();
    $active.addClass('sButton2');
};

interval = setInterval(secondPrint, 1000)
secondPrint();

---

提示：1）不要使用隐式全局变量（没有

var

）。2） 一个元素可以有多个类，因此在jQuery中，不应使用

attr（'class'）

而应使用

addClass

和

removeClass

；你也应该改变你的CSS来利用这一点，减少重复。谢谢你的提示！我忘记了addClass和removeClass。这很好，但是我怎样才能让它在经过一次迭代之后停止呢？我没有使用setInterval（），因为我不想让它永远持续下去。不管怎样，我是用clearInterval（）计算出来的。谢谢没问题，很乐意帮忙。我已经为你更新了我的答案

var secondPrint = function() {
    var $buttons = $('.sButton');
    var $active = $buttons.filter('.sButton2');
    $active = (!$active.length || $active.is(':last')) ? $('.sButton:first') : $active.next();
    $buttons.removeClass('sButton2');
    $active.addClass('sButton2');
};

setInterval(secondPrint, 1000)
secondPrint();

var interval;
var secondPrint = function() {
    var $buttons = $('.sButton');
    var $active = $buttons.filter('.sButton2');
    $buttons.removeClass('sButton2');
    if ($active.is(':last')) {
        clearInterval(interval);
        return;
    }

    $active = !$active.length ? $('.sButton:first') : $active.next();
    $active.addClass('sButton2');
};

interval = setInterval(secondPrint, 1000)
secondPrint();