javascript - jquery定时遍历元素的问题

Question

刚学JQuery,希望实现这样一个效果：在如下的标签中，循环遍历one,two,three,four，每隔1秒钟设置下一个标签的属性，实现类似于“轮询”的效果。 {代码...} 我写了一个实现，但是似乎不起作用。请问是什么地方出现了...

怪我咯 · Answer

1.

$(document).ready(function () {
    function select($pri) {
        var $current = $pri.next();
        $current.radioClass('hilite');
        setTimeout(function() { select($current); }, 1000);
    }($('#one'));
    //这个写法是有问题的
    //上述的写法只是 声明了一个select函数，进行了一个($('#one'))表达式求值
    //并没有起到定义后立即执行的效果
});

//如果可达到你想要的效果

$(document).ready(function () {
    (function select($pri) {
        var $current = $pri.next();
        $current.radioClass('hilite');
        setTimeout(function() { select($current); }, 1000);
    }($('#one')));
});

2.next方法不会自动回到头部，所以执行完最后一个兄弟节点后，就没有效果了
你需要在遍历到最后一个后，执行prev，从后往前遍历，到头后再next

阿神 · Answer

把你想要执行的内容写成 fucntion，塞入 setTimeout 就可以了。

$(function() {

    var selector = $('#onem,#two,#three,#four');

    var timeoutCallback = function() {
    
        var current = selector.filter('.hilite');
        var next = current.next();
        
        if( next.length <= 0 ) {
            return false;
        }
        
        next.addClass('hilite');
        selector.removeClass('hilite');
    }
    
    setTimeout(timeoutCallback, 1000);

});

另外，这个简单的示例不会一直循环下去的，因为当 .hilite 到最后一个元素时，timeoutCallback 将返回 false，你可以判断，当最手一个时，重新从第 1 个开始。

阿神 · Answer

用settimeinterval代替settimeout，具体我就不写了。
如果一定要用settimeout，那必须在内部再自己调用一次自己才能实现循环，否则只是延时执行而已。

巴扎黑 · Answer

我动手写了下，主要思路是使用setInterval每隔1秒调用一次更换class hilite的函数；

jQuery代码如下：

body部分的内容就是你的：

One
Two
Three
Four



为了凸显这种交替的效果，设置了一段css

最终的效果就是每隔一秒，每隔p中的内容就变为红色加粗字体；

![图片描述][1]