Question

背景：我正在使用jQuery逐个向列表中的每个<a>元素添加一个类。我已经addClass()部分工作了 - .highlighted课程已添加到我的第一个<a>，然后被移除并添加到第二个等等。

问题：我无法让addClass()函数在到达最后一个<a>元素时重复。我从搜索SO中了解到，setInterval()是一种更好的方法来处理setTimeout()，这是我最初使用的，但我还没弄清楚如何指定函数需要重复。任何帮助表示赞赏！

HTML：

  <a id="1">one</a>
  <a id="2">two</a>
  <a id="3">three</a>
  <a id="4">four</a>
  <a id="5">five</a>

JS：

var index = 0;
var $aArray = $('a');

function highlight(i){
    if(i>0){
        $aArray.eq(i-1).removeClass('highlight');
    }
    if(i == $aArray.length){
        return;
    }
    $aArray.eq(i).addClass('highlight');   

    setInterval(function() { highlight(i+1) },2500);
}

highlight(0);

Answer 1

这里有几个问题：

您在每次调用时都会启动一个新的setInterval()以突出显示并永不停止前一个调用，这样您就可以同时运行多个计时器。
当您点击退货声明时 - 您从不突出显示任何内容。
您回绕到开头逻辑未正确实现。

使用%运算符实现数组包装通常最简单。你可以做一些更简单的事情：

function highlight(items, index) {
    index = index % items.length;
    items.removeClass("highlight");
    items.eq(index).addClass('highlight');   
    setTimeout(function() {highlight(items, index + 1)}, 2500);
}

highlight($('a'), 0);

工作演示：http://jsfiddle.net/jfriend00/VLR4n/

addClass在循环中使用setInterval到数组

1 个答案: