單擊一個按鈕以觸發另一個按鈕的延遲單擊

Question

我正在嘗試創建一個按鈕，當它單擊時，它也會觸發另一個按鈕的單擊，但是每個按鈕都有延遲。 例如，如果單擊“ Main Button ，則“ Sub Button 1將觸發單擊，然后在2秒鍾后單擊“ Sub Button 2並在4秒鍾后單擊“ Sub Button 3 。

實際場景是客戶最多可以選擇3種產品，如果單擊main button ，這3種產品將被添加到購物車中，因為這3種產品的“ add to cart button也將在單擊主按鈕時也被單擊。 產品頁面上有一個Ajax。 如果單擊主按鈕，有時僅添加1或2個產品。 我正在嘗試延遲每個按鈕的單擊。

 $(".main-button").on("click",function(){ $(".container .row").each(function(i){ $rowNum = $(this).attr("id","row-" + i); $rowNum.find("button").trigger("click").delay(5000).text("clicked"); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="main-button">Main Button</button> <div class="container"> <div class="row"> <button class="sub-button">Sub Button 1</button> </div> <div class="row"> <button class="sub-button">Sub Button 2</button> </div> <div class="row"> <button class="sub-button">Sub Button 3</button> </div> </div> 

Answer 1

$(".main-button").on("click",function(){
   myLoop ($(".container .row").children().length)
});


var i = 1;                    

function myLoop (count) {          
  setTimeout(function () {    
    $('.container :nth-child('+i+')').children('button').text("clicked")               
      if (i < count) {            
      i++
         myLoop(count);            

      }                       
   }, 1000)
}

嘗試演示-https: //jsfiddle.net/jijomonkmgm/oL3bzp5r/

Answer 2

這是沒有具體你問什么，但的功能，你所尋求的結果將是相同的。

在評論中，其他人和我本人談到了如何選擇在主函數本身內調用子按鈕函數，而無需鏈接按鈕單擊功能的邏輯。

在執行此操作之前，需要確保所有子功能都在全局范圍內，以便可以在主功能中訪問它們。

例：

subButtonOneFunction() {
    //do something
}

subButtonTwoFunction() {
    //do something
}

subButtonThreeFunction() {
    //do something
}

$(".main-button").on("click",function(){
    $.ajax({
        type: 'POST',
        url: '/path/to/your_page.php',
        data: {
            data : dataVar,
            moreData : moreDataVar
        },
        success: function (html) {
            subButtonOneFunction();
            subButtonTwoFunction();
            subButtonThreeFunction();
            //and so forth
        }
    })
});

在此示例中，子按鈕功能位於主功能的范圍之內，因此您將能夠在主功能內調用子功能。

除了您嘗試的延遲按鈕單擊循環之外，我不知道主要功能是否還有更多，我嘗試提供一個AJAX函數如何工作的示例，以及添加一個可以調用子函數的成功函數。

首先，我們聲明type 。 類型是AJAX函數將解析的數據的數據類型。 值得注意的數據類型是POST和GET 。

其次，我們聲明url 。 網址是您的數據將被解析到的頁面。 它可以是您當前的頁面，也可以是另一個頁面。

第三，我們聲明我們要解析的數據的變量名及其內容。 這些變量與您從JavaScript知道的任何其他變量具有相同的邏輯。 因此，它們可以包含數字，字符串，數組，無論您通常知道什么。

可以從AJAX示例中獲取數據變量之一並為其賦值，如下所示：

我們的AJAX示例： data : dataVar

文字示例： data : $('input#SomeInputContainingValue').val()

我們的AJAX變量數據現在將包含ID為SomeInputContainingValue的輸入字段的值。

使用clicked元素值的另一個示例： data : $(this).val()

如您所見，數據只是您將聲明為任何其他JavaScript變量的變量。 此處的區別在於:基本上是AJAX函數的數據數組中=的語法。

最后，我們在AJAX函數中聲明success函數。 這是因為它使我們能夠在成功時“有所作為”。 例如，您可以在此處調用子函數。

這將是一種更清潔的方法，並且將來在遍歷應用程序時將更容易瀏覽，並且看起來不像是“ hack”或其他變通方法。