jquery定时遍历元素的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery定时遍历元素的问题

刚学JQuery,希望实现这样一个效果:在如下的标签中,循环遍历one,two,three,four,每隔1秒钟设置下一个标签的属性,实现类似于“轮询”的效果。

<div id="radio">
    <div id="one" class="hilite">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div>
</div>

我写了一个实现,但是似乎不起作用。请问是什么地方出现了问题?另外还有更佳的实现方式吗?

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

$.fn.radioClass = function (cls) {
    return this.siblings().removeClass(cls).end().addClass(cls);
}

展开
收起
小旋风柴进 2016-03-26 11:52:05 1847 0
1 条回答
写回答
取消 提交回答
  • 小旋风柴进

    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

    2019-07-17 19:16:00
    赞同 展开评论 打赏
问答分类:
相关产品:
问答排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载