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

Question

我正在尝试使用 setTimeout()、addClass()、removeClass()...

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

代码运行一次...并在 500ms 间隔内添加删除 active 类...

现在我希望我的函数一次又一次地执行...为此我尝试在其内部调用我的函数。

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

但不知何故，添加和删除 active 类不再执行...我想知道我哪里出错了...我怀疑我的代码是否创建了一个无限循环...？

堆栈片段

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

div {
  display: none;
}

div.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

Answer 1

如果您希望它重复遍历元素，使用 setInterval() 会更有意义，然后返回到 first() 元素到达最后一个。像这样:

$(document).ready(function() {
  function classAddRemove() {
    var $divs = $('div');
    setInterval(function() {
      var $next = $divs.filter('.active').next();
      $divs.removeClass('active');
      
      if (!$next.length)
        $next = $divs.first();
        
      $next.addClass('active');
    }, 500);
  }

  classAddRemove();
});

div {
  display: none;
}

div.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>