Question

我正在尝试使用active，setTimeout()，addClass() ...

在一个时间间隔内在多个div上添加和删除removeClass()课程

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

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

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

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

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

Stack Snippet

＆＃13;

$(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();
});

＆＃13;

div {
  display: none;
}

div.active {
  display: block;
}

＆＃13;

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

＆＃13;

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>

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

1 个答案: