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变量 data 现在将包含ID为 SomeInputContainingValue 的输入字段的值。

另一个使用单击的元素值的示例：data : $(this).val()

如您所见，数据只是您将声明为任何其他JavaScript变量的变量。此处的区别在于:基本上是AJAX函数数据数组中=的语法。

最后，我们在AJAX函数中声明success函数。这是因为它使我们能够在成功时“有所作为”。例如，您可以在此处调用子函数。

这将是一种更清洁的方法，并且将来在浏览应用程序时将更容易浏览，并且看起来不像是“黑客”或其他变通方法。

点击一个按钮可触发其他按钮的延迟点击

2 个答案: