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); 
};