简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

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

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

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

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

$(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);
}
PHP中文网PHP中文网2749 Il y a quelques jours313

répondre à tous(4)je répondrai

  • 怪我咯

    怪我咯2017-04-10 15:42:32

    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

    répondre
    0
  • 阿神

    阿神2017-04-10 15:42:32

    把你想要执行的内容写成 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 个开始。

    répondre
    0
  • 阿神

    阿神2017-04-10 15:42:32

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

    répondre
    0
  • 巴扎黑

    巴扎黑2017-04-10 15:42:32

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

    jQuery代码如下：

    <script type="text/javascript">

    $(function (){

    var shiftClass=function (){ //定义函数，使得具有.hilite类的下一个元素具有该class
    var $startItem=$('.hilite'); // 获取当前的.hilite类所在元素并存在变量中，会经常调用

    if ( $startItem.next().length) //判断当前具有hilite的元素是不是最后一个，如不是就把hilite传给下一个元素

    { $startItem.removeClass('hilite'); //移除当前元素的hilite类

    $startItem=$startItem.next();      //获取下一个元素并赋予hilite类

    $startItem.addClass('hilite');

    }
    else //如果当前具有hilite类的元素是最后一个元素了

    { $startItem.removeClass('hilite'); //移除它的hilite类属性

    $startItem=$('#radio p').eq(0); 	  //让$startItem重新定位到第一个位置并赋予类属性

    $startItem.addClass('hilite'); }

    };

    setInterval(shiftClass, 1000); //每隔1秒就调用一次函数

    })

    </script>

    body部分的内容就是你的：

    <body>
    <p id="radio">

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

    </p>

    </body>

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

    <style type="text/css">
    .hilite{color:red;font-weight:bold;}

    </style>

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

![图片描述][1]

    répondre
    0
  • Annulerrépondre