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定义尚未定义。 在某些情况下，其中有两个，在另一些情况下，则有四个要素。

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

Answer 2

您可以检查当前活动元素ID是否最后。 如果是，则显示set中的第一个元素，否则显示下一个同级元素：

$(function(){
  var slides = $('.grid-item .slide-image');
  setInterval(function(){
    var currentactive = $('.active');
   var _target = currentactive.is(':last-child') ? slides.first() : currentactive.next();
   slides.removeClass('active')
  _target.addClass('active')
 }, 800);
});

工作演示