自动点击同一班级名称中的一个元素

Question

当我运行小提琴时，应该自动更改文本“a”而没有click事件，并且必须延迟一个一个地进行更改，我该怎么做？

$(document).ready(function() { 
 
    var element = ".pictures"; 
 
    var delay = 2 * 1000; //2 Seconds 
 

 
    function change() { 
 
    $(element).one('click', function() { 
 
     $(this).text("Changed"); 
 
    }) 
 
    } 
 

 
    change(); 
 
    setInterval(change(), delay); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div>

Here's the fiddle

Answer 1

您需要trigger()单击处理中change功能。此外，您需要将函数引用传递给setInterval()方法，并且一旦单击所有元素，也使用clearInterval()取消操作。

$(document).ready(function() { 
 

 
    //Cache elements 
 
    var element = $(".pictures"); 
 

 
    //variable to maintain index of clicked item 
 
    var i = 0; 
 

 
    //2 Seconds 
 
    var delay = 2 * 1000; 
 

 
    //Bind event handler 
 
    element.one('click', function() { 
 
    $(this).text("Changed"); 
 
    }) 
 

 
    function change() { 
 
    if (i == element.length && interval) { 
 
     clearInterval(interval); 
 
    } 
 

 
    //get element at index using .eq() and trigger click handler 
 
    element.eq(i++).trigger('click'); 
 
    } 
 

 
    //Execute on page load 
 
    change(); 
 

 
    //On interval 
 
    var interval = setInterval(change, delay); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div>

Update Fiddle

Answer 2

这应做到：

$(document).ready(function() { 
     var elementSelector = ".pictures"; 
     var delay = 2 * 1000; //2 Seconds 

     function change(element, delayIndex) { 
      setTimeout(function(){ 
       element.text("Changed"); 
      }, delay*delayIndex); 
     } 

     $(elementSelector).each(function(i, v){ 
      change($(v), i); 
     }); 

    }); 

这里是让基于元素的fiddle

Answer 3

使用eq()方法该索引并使用一个计数器变量来逐个选择。

$(document).ready(function() { 
 
    var element = ".pictures"; 
 
    var delay = 2 * 1000; //2 Seconds 
 
    var $ele = $(element), 
 
    i = 0; 
 

 
    function change() { 
 
    // get the element by index and update 
 
    $ele.eq(i++).text("Changed"); 
 
    // clear the interval when updated all 
 
    if (i == $ele.length) clearInterval(inter); 
 
    } 
 

 
    change(); 
 
    var inter = setInterval(change, delay); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div>

Answer 4

请试试这个

$(document).ready(function() { 
 
    var element = ".pictures"; 
 
    var delay = 2 * 1000; //2 Seconds 
 
    
 
    
 
    
 

 
    function change(el) { 
 
     $(el).text("Changed");  
 
    } 
 
    
 
    $.each($('.pictures'), function(i, el){ 
 

 
    $(el).css({'opacity':0}); 
 
     change(el); 
 
    setTimeout(function(){ 
 
     $(el).animate({ 
 
     'opacity':1.0 
 
     }, 450); 
 
    },1000 + (i * 1000)); 
 

 
    }); 
 

 
    
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div>

Answer 5

working fiddle

使用index指下一个元素和停止的时间间隔当指数等于的div的数量：

$(document).ready(function() 
{ 
    var element = ".pictures" ; 
    var delay = 2 * 1000 ; //2 Seconds 
    var index = 0; 
    var limit = $(".pictures").length ; 

    $(element).one('click', function() { 
    $(this).text("Changed"); 
    }) 

    function change(){ 
    if(index<limit) 
     $(element+':eq('+index+')').click(); 
    else 
     clearInterval(interval); 

    index++; 
    } 

    change(index); 
    var interval = setInterval(change, 500); 
}) 

希望这有助于。

$(document).ready(function(){ 
 
    var element = ".pictures" ; 
 
    var delay = 2 * 1000 ; //2 Seconds 
 
    var index = 0; 
 
    var limit = $(".pictures").length ; 
 

 
    $(element).one('click', function() { 
 
    $(this).text("Changed"); 
 
    }) 
 

 
    function change(){ 
 
    if(index<limit) 
 
     $(element+':eq('+index+')').click(); 
 
    else{ 
 
     clearInterval(interval); 
 
     console.log('Intervel stopped.'); 
 
    } 
 

 
    index++; 
 
    } 
 

 
    change(index); 
 
    var interval = setInterval(change, 500); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div> 
 
<div class="pictures">a</div>

Answer 6

逐个与索引和清晰的间隔完成

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="pictures">a</div> 
<div class="pictures">a</div> 
<div class="pictures">a</div> 
<div class="pictures">a</div> 
<div class="pictures">a</div> 
<div class="pictures">a</div> 
<script> 
$(document).ready(function() { 
    var element = ".pictures"; 
    var delay = 2 * 1000; //2 Seconds 
    var tempIndex = 0; 

    var interv = setInterval(change, delay); 

    function change() { 
    if(tempIndex < $(element).length){ 
     $(element+":eq("+tempIndex+")").text("Changed"); 
     tempIndex++; 
    }else{ 
     clearInterval(interv); 
    } 
    } 

}) 
</script>