javascript - jQuery 在具有间隔的多个元素上切换类

Question

我创建了这个漂亮的 jQuery 代码片段来在一个时间间隔内切换元素的类:

setInterval(function(){$('.grid-item .slide-image').toggleClass('active')}, 800);

脚本运行良好!现在，我在包装器 .grid-item 中获得了多个具有基类 .slide-image 的元素。

<div class="grid-item">
  <div class="slide-image"><img src="http://www.placehold.it/500x500/233953"></div>
  <div class="slide-image"><img src="http://www.placehold.it/500x500/03144b"></div>
  <div class="slide-image"><img src="http://www.placehold.it/500x500/030a4b"></div>
</div>

有没有办法重写代码片段，以便第二个 .slide-image 在第一个之后获得类 .active？然后是第三个元素等等……

问题:.slide-image 元素的数量未定义。在某些情况下有两个，在另一些情况下有四个元素。

Check out my CodePen!

Answer 1

试试这个

var slides = $('.grid-item .slide-image'),  // cache slides 
    counter = 0;                            // global counter

setInterval(function(){
  slides.removeClass('active');             // remove active class
  slides.eq(counter).addClass('active');    // add active class
  counter++;

  if (counter == slides.length) counter = 0;  // reset counter after last slide
}, 800);

Updated CodePen