JQuery - 使用计时器循环一个类

Question

我有一个下面的结构列表，

<div id="slider">
  <ul>
    <li class='active'> a </li>
    <li> b </li>
    <li> c </li>    
    <li> d </li>
    <li> e </li>
  </ul>
</div>

我需要以循环方式更改 li 的“active”类 这是我正在使用的脚本。问题是它要么将类 active 添加到所有 li 中，要么从所有 li 中删除类 active

      toggleSlide = function(){
          $("#slider ul li").each(function(index) {
            if($(this).hasClass('active')){

              $("#slider ul li").removeClass('active');
              $(this).next().addClass('active'));
              //lis = $("#slider ul li")
              //$(lis[(index+1)%lis.length]).addClass('active');
            }
          });
        }
   setInterval(toggleSlide, 5000);​

Answer 1

您可以使用 .add() 和 .last() 因为来自 .add() 按文档顺序翻转，如下所示：

var toggleSlide = function(){
  $("#slider li.active").removeClass()
   .next().add("#slider li:first").last().addClass("active");
}
setInterval(toggleSlide, 5000);

您可以在此处进行测试（演示持续时间为 1000 毫秒）

这是如何工作的，它需要下一个

; 如果有一个，则使用 .last() （因为它们是按文档顺序排列的）我们将得到 .next() if 存在，否则该集合仅包含一个元素，即 :first

，我们又回到了开头。

Answer 2

这应该会更好一些：

toggleSlide = function() {    
    var $active = $('#slider ul li.active');
    if($active.length == 0) {
        $active = $('#slider ul li:first');
    }
    $active.removeClass('active');
    if($active.next('li').length > 0) {
        $active.next('li').addClass('active');
    } else {
        $('#slider ul li:first').addClass('active');
    }
}
setInterval(toggleSlide, 5000);​

您不需要 .each() 循环，这就是导致问题的原因。您只需要处理当前活动的元素。

实例：

http://jsfiddle.net/MS5DV/

Answer 3

我会选择更简单的

toggleSlide = function() {
    var active = $("#slider ul li.active");
    var next   = active.next();
    if (next.length === 0) {
        next = $('#slider ul li:first');
    }

    active.removeClass('active');
    next.addClass('active');
}
setInterval(toggleSlide, 1000);

http://jsfiddle.net/HyRYC/1/

基本上，找到活动项目并将其保存到本地变量中。然后找到它后面的项目并保存它。现在，如果最后一个处于活动状态，则 next() 将返回一个没有匹配项的 jQuery 对象，这意味着它的长度为零。在这种情况下，找到第一个项目作为我们的下一个。

不，我们只需从当前活动项目中删除 active 类，并将其添加到下一个活动项目中。