For循环嵌套函数

Question

我在网站上构建了订单，并使用一些js来浏览订单流程。一个步骤完成之后，用户应该点击“下一步”按钮，然后各种div应该显示/隐藏：

$("#buttonShowStep2").click(function() { 
    $(this).hide("blind", 200); 
    $("#outerDivStep2").show("blind", 300, function() { 
     $('html, body').animate({ scrollTop: $(".scrollToHeading2").offset().top - 20 }); 
     document.getElementById("checkHeading1").className = "orderChecked"; 
    }); 
}); 

$("#buttonShowStep3").click(function() { 
    $(this).hide("blind", 200); 
    $("#outerDivStep3").show("blind", 300, function() { 
     $('html, body').animate({ scrollTop: $(".scrollToHeading3").offset().top - 20 }); 
     document.getElementById("checkHeading2").className = "orderChecked"; 
    }); 
}); 

$("#buttonShowStep4").click(function() { 
    $(this).hide("blind", 200); 
    $("#outerDivStep4").show("blind", 300, function() { 
     $('html, body').animate({ scrollTop: $(".scrollToHeading4").offset().top - 20 }); 
     document.getElementById("checkHeading3").className = "orderChecked"; 
    }); 
}); 

正如你所看到的代码很长......。我试图在它周围构建一个for循环来包装它。不幸的是，它不工作。

问题：是否有可能建立一个for循环与多个嵌套功能？谢谢你的帮助！使用相同的功能，所有按钮

更改按钮，这

for (var i = 2; i <= 4; i++) { 
    var buttonShowStep = "#buttonShowStep" + i; 
    var outerDivStep = "#outerDivStep" + i; 
    var scrollToHeading = ".scrollToHeading" + i; 
    var checkHeading = "#checkHeading" + i -1; 
     $(buttonShowStep).click(function() { 
      $(this).hide("blind", 200); 
      $(outerDivStep).show("blind", 300, function() { 
       $('html, body').animate({ scrollTop: $(scrollToHeading).offset().top - 20 }); 
       document.getElementById(checkHeading).className = "orderChecked"; 
      }); 
    }); 
}; 

Answer 1

重构：

<a data-step="1" class="buttonShowStep"> 

并添加此功能：

$(".buttonShowStep").click(function() { 
    var self = $(this); 
    var step = self.data("step"); 
    if (step == 1) return; 
    var prevStep = step - 1; 
    self.hide("blind", 200); 
    $("#outerDivStep" + step).show("blind", 300, function() { 
     $('html, body').animate({ scrollTop: $(".scrollToHeading" + step).offset().top - 20 }); 
     document.getElementById("checkHeading" + prevStep).className = "orderChecked"; 
    }); 
}); 

Answer 2

在你的代码外壳带有副作用。更改为：

function ButtonShowStep(i) { 
    var buttonShowStep = "#buttonShowStep" + i; 
    var outerDivStep = "#outerDivStep" + i; 
    var scrollToHeading = ".scrollToHeading" + i; 
    var checkHeading = "#checkHeading" + i -1; 
    $(buttonShowStep).click(function() { 
     $(this).hide("blind", 200); 
     $(outerDivStep).show("blind", 300, function() { 
      $('html, body').animate({ scrollTop: $(scrollToHeading).offset().top - 20  }); 
      document.getElementById(checkHeading).className = "orderChecked"; 
     }); 
    }); 
} 

for (var i = 2; i <= 4; i++) { 
    ButtonShowStep(i); 
};