Question

我在网站上构建了一个订单表单，并使用了一些js来浏览订单流程。一步完成后，用户应点击＆＃34; next＆＃34;按钮，然后各种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);
};

对于具有嵌套函数的循环

2 个答案: