jQuery使用for循環和隨機eq觸發多次點擊事件

Question

我需要多個隨機元素的click事件。 我在下面的代碼中使用了此代碼，但無法正常工作。 它僅觸發一次。

$('.dbl_rand_txt>li').on('click', function(e) { 
  var dbl_rand_no = $(this).children('span').children('a').text();
  var random = Math.floor(Math.random()*100);
  for (var i = 1; i <= dbl_rand_no; i++) {
     $(".tab-content li").eq(random).click();
  }
}); 

Answer 1

您還需要將通過dbl_rand_no返回的string轉換為Number

由於random是一次計算的，因此$(".tab-content li").eq(random)將始終返回相同的元素。 如果要定位其他元素，請在for循環內移動random計算。

$('.dbl_rand_txt>li').on('click', function (e) {

    //Convert string to number
    var dbl_rand_no = parseInt($(this).children('span').children('a').text(), 10);
    for (var i = 1; i <= dbl_rand_no; i++) {
        //Calculate random for different element
        var random = Math.floor(Math.random() * 100);

        $(".tab-content li").eq(random).click();
    }
});

Answer 2

嘗試這個。

 var dbl_rand_no = Number($(this).children('span').children('a').text());

還將隨機函數放入foor循環中。

Answer 3

將您的隨機數生成移動到循環內部，以便循環執行多次，每次應生成一個新的隨機數，並使用.trigger('click')觸發函數，而不是.click()盡管它是trigger('click')的簡寫形式，它在沒有參數的情況下調用.click()會調用click事件，它將調用一個少一些的函數，而.trigger("click")更快，請參見此處

請參閱下面的演示

 $('.dbl_rand_txt>li').on('click', function(e) { var dbl_rand_no = parseInt($(this).children('span').children('a').text()); for (var i = 1; i <= dbl_rand_no; i++) { var random = Math.floor(Math.random() * 5); $(".tab-content li").eq(random).trigger('click'); } }); $(".tab-content li").on("click", function() { console.log("Clicked <li> with text", $(this).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="dbl_rand_txt"> <li><span><a href="#.">1</a></span></li> <li><span><a href="#.">2</a></span></li> <li><span><a href="#.">3</a></span></li> <li><span><a href="#.">4</a></span></li> <li><span><a href="#.">5</a></span></li> </ul> <ul class="tab-content"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 

Answer 4

嘗試運行以下代碼片段並觀察結果。

 $('.dbl_rand_txt > li').on('click', function(e) { var dbl_rand_no = $(this).children('span').children('a').text(); var random = Math.floor(Math.random()*10); for (var i = 1; i <= dbl_rand_no; i++) { $(".tab-content li").eq(random).click(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="dbl_rand_txt"> <li><span><a>10</a></span></li> <li><span><a>5</a></span></li> <li><span><a>2</a></span></li> </ul> <ul class="tab-content"> <li onclick="console.log('clicked 0');"></li> <li onclick="console.log('clicked 1');"></li> <li onclick="console.log('clicked 2');"></li> <li onclick="console.log('clicked 3');"></li> <li onclick="console.log('clicked 4');"></li> <li onclick="console.log('clicked 5');"></li> <li onclick="console.log('clicked 6');"></li> <li onclick="console.log('clicked 7');"></li> <li onclick="console.log('clicked 8');"></li> <li onclick="console.log('clicked 9');"></li> </ul> 

它只是基於您的問題的一個示例。 看看是否適合您。