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

Question

我创建了这个小小的jQuery Snippet来切换一个区间中元素的类:

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

脚本工作正常!现在我.slide-image在包装器中使用了基类的多个元素.grid-item.

<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元素的数量没有定义.在某些情况下,有两个,另一个有四个元素.

看看我的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);

更新了CodePen