自動點擊同一班級名稱中的一個元素

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>