Question

我有一个带有几个p元素的div，我用jQuery循环它们，每5秒触发一次点击下一个元素。现在我的问题是如何在单击最后一个元素时重新启动循环？

这是我的jQuery代码：

jQuery('.clickMe').each(function (ind, elem) {    
   window.setTimeout(function () {
       jQuery(elem).trigger("click");
   }, 5000 * ind);          
});

这是我希望看到它的html：）

<div class='slider-circles'>
   <p class='transparent-cricles clickMe'></p>
   <p class='transparent-cricles clickMe'></p>
   <p class='transparent-cricles clickMe'></p>
   <p class='transparent-cricles clickMe'></p>
   <p class='transparent-cricles clickMe'></p>
   <p class='transparent-cricles clickMe'></p>
</div>

Answer 1

var ps=jQuery('.clickMe')
if (ps.length) {
    var index=0;
    setInterval(function() {
        ps.eq(index).trigger("click");
        index=(index+1)%ps.length;
    },5000);
}

Answer 2

$(function(){
window.setInterval(function(){
  logic();
}, 600);
});

function logic(){
   window.setTimeout(function () {
       $('.clickMe').each(function (ind, elem) {    
        window.setTimeout(function () {
           $(elem).hide();
           if(ind % 5 == 0) $('.clickMe').show();
           console.log(ind);
       }, 100 * ind);          
        });  
   },600 );
}

小提琴：https://jsfiddle.net/3how0tm0/1/

每次循环后都需要重置它们。要想象我隐藏并显示您的<p> - 标签。您需要添加和删除触发事件。

Answer 3

添加和删除课程以了解您已点击过。

var initiliazeClicks = function() {
  jQuery('.clickMe').each(function(ind, elem) {
    window.setTimeout(function() {


    jQuery(elem).addClass('clicked').removeClass('clickMe').trigger('click');

          if (jQuery('.clickMe').length == 0) {
            jQuery('.clicked').removeClass('clicked').addClass('clickMe');
            initiliazeClicks();

          }

        }, 5000 * ind);
      });

    };


    initiliazeClicks();

示例：https://jsfiddle.net/zsek6c2a/

Answer 4

最后一次点击后，再次点击全部点击：

function run_clicking(elements) {
  var last_index = elements.length - 1;
  elements.each(function () (index, elem) {
                  window.setTimeout(function () {
                       jQuery(elem).trigger("click");
                       if( index == last_index ) {
                           // when last element, run it again (after 5s)
                           window.setTimeout(function () {
                                  run_clicking(elements);
                           }, 5000);
                       }
                   }, 5000 * index);
   }
}
run_clicking(jQuery('.clickMe'));

Answer 5

使用自定义函数在到达最后一个元素时重新启动循环：

{{1}}

https://jsfiddle.net/7g3eo93m/

到达最后一个元素后jQuery间隔重启

5 个答案: