单击一个按钮以触发另一个按钮的延迟单击

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”或其他变通方法。