Javascript 在多个div中添加和删除类迭代

我正在尝试使用

setTimeout（）

，

addClass（）

，

removeClass（）

，在一个时间间隔内添加和删除多个div上的

active

类

function classAddRemove() {
  $("div").each(function(index) {
    setTimeout(function() {
      $("div").eq(index - 1).removeClass("active");
      $("div").eq(index).addClass("active");
    }, 500 * (index + 1));
  });
}

代码运行一次…并在500ms间隔内添加removeactive类

现在我希望我的函数一次又一次地执行…因为我试图在自己内部调用我的函数

function classAddRemove() {
  $("div").each(function(index) {
    setTimeout(function() {
      $("div").eq(index - 1).removeClass("active");
      $("div").eq(index).addClass("active");
    }, 500 * (index + 1));
  });
  classAddRemove();
}

但是不知何故，add and remove

active

类没有再次执行…我想知道我哪里出错了…我怀疑我的代码是否在创建一个无限循环

堆栈片段

$（文档）.ready（函数（）{
函数classAddRemove（）{
$（“div”）。每个函数（索引）{
setTimeout（函数（）{
$（“div”）.eq（索引-1）.removeClass（“活动”）；
$（“div”）.eq（index）.addClass（“活动”）；
}，500*（指数+1））；
});
}
classAddRemove（）；
});
div{
显示：无；
}
活动分区{
显示：块；
}

1.
2.
3.
4
如果希望重复循环元素，则使用
setInterval（）
，然后在到达最后一个元素后返回到
first（）
元素更有意义。大概是这样的：


$（文档）.ready（函数（）{
函数classAddRemove（）{
变量$divs=$（'div'）；
setInterval（函数（）{
var$next=$divs.filter（'.active'）.next（）；
$divs.removeClass（'active'）；
如果（！$next.length）
$next=$divs.first（）；
$next.addClass（'active'）；
}, 500);
}
classAddRemove（）；
});
div{
显示：无；
}
活动分区{
显示：块；
}

1.
2.
3.
4
请尝试使用setInterval（），而不是setTimeout（），setInterval（）将在所需的时间间隔内继续触发。如何在单击按钮时添加类？