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？然后第三个元素依旧......

问题：-race - 元素的数量没有定义。在某些情况下，有两个，另一个有四个元素。

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

Answer 2

您可以检查当前活动元素ID是否为last。如果是，则显示set else中的第一个元素show next sibling element：

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

<强> Working Demo

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

2 个答案: