Question

我有一个循序渐进的过程，可指导用户完成设置过程。我想要一个页面中包含的所有代码（意思是我有setup.php，而不是step1.php，step2.php和step3.php）。我用jQuery编写了这样的代码:(它一次只显示一步）

$(document).ready(function() {
    // Hide all sections
    $("article").hide();

    // Show intro
    $("#intro").fadeIn("slow").delay(500).slideDown("slow", function() {
        // Listen for user to click "next" link
        $("#intro .next").click(function() {
            // Hide intro
            $("#intro").fadeOut("fast").delay(500).slideUp("fast", function() {
                // Show EULA section
                $("#eula").fadeIn("slow").delay(500).slideDown("slow", function() {
                    // Listen for user to click "next" link
                    $("#eula .next").click(function() {
                        $("#eula").fadeOut("fast").delay(500).slideUp("fast", function() {
                            // Show site section
                            $("#site").fadeIn("slow").delay(500).slideDown("slow", function() {
                                // Listen for user to click "next" link
                                $("#site .next").click(function() {
                                    $("#site").fadeOut("fast").delay(500).slideUp("fast", function() {
                                        // Show database section
                                        $("#database").fadeIn("slow").delay(500).slideDown("slow", function() {
                                            // Listen for user to click "next" link
                                            $("#database .next").click(function() {
                                                $("#database").fadeOut("fast").delay(500).slideUp("fast", function() {
                                                    // Show email section
                                                    $("#email").fadeIn("slow").delay(500).slideDown("slow", function() {
                                                        $("#email .next").click(function() {
                                                            $("#email").fadeOut("fast").delay(500).slideUp("fast", function() {
                                                                // Submit form to PHP script
                                                                $("#done").fadeIn("slow").delay(500).slideDown("slow", function() {

                                                                });
                                                            });
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

是的，我意识到这非常难看，但我不知道另一种方法吗？任何人都可以推荐更好的方式吗？

Answer 1

您可以使用命名函数指针代替匿名函数来解决这个问题，它确实有助于缩进。

使用您的示例，以下是前几个步骤：

$(document).ready(function() {
    // Hide all sections
    $("article").hide();

    // Show intro
    $("#intro").fadeIn("slow").delay(500).slideDown("slow", Step1);
});


// Listen for user to click "next" link
function Step1() {
    $("#intro .next").click(Step2);
}

// Hide intro
function Step2() {
    $("#intro").fadeOut("fast").delay(500).slideUp("fast", Step3);
}

// Show EULA section
function Step3() {
    $("#eula").fadeIn("slow").delay(500).slideDown("slow", Step4);
}

function Step4() {
    // Continue this pattern until you reach the final step
}

Answer 2

我认为您可以保存用户在变量上的步骤，并使您的代码更简单。

switch (step) 
{ 
   case '1': $("#intro").fadeOut("fast").delay(500).slideUp("fast");
   case '2': $("#eula").fadeOut("fast").delay(500).slideUp("fast");
   ...
}

Answer 3

正如您已经注意到的那样，代码重复了以下模式：

$("#intro").fadeIn("slow").delay(500).slideDown("slow", function() {
    // Listen for user to click "next" link
    $("#intro .next").click(function() {
        // Hide intro
        $("#intro").fadeOut("fast").delay(500).slideUp("fast", function() { ...

只是有不同的元素。因此，您可以轻松地为此作品构建生成器：

function getStep(id, callback) {
    return function() {
        var el = $("#"+id);
        el.fadeIn("slow").delay(500).slideDown("slow", function() {
            // Listen for user to click "next" link
            el.find(".next").click(function() {
               // Hide it
               el.fadeOut("fast").delay(500).slideUp("fast", callback);
            });
        });
    };
}

getStep("intro", getStep("eula", getStep("site", getStep("database", getStep("email", function() {
    // Submit form to PHP script
    $("#done").fadeIn("slow").delay(500).slideDown("slow", function() {
        ...
    });
 })))));

当然，您可以使用循环（甚至是递归函数）来构建步骤。如果您更改了getStep的两个参数，则可以使用reduce：

 ["intro", "eula", "site", "database", "email"].reduce(function(cb, id){
     return getStep(id, cb);
   }, function() {
     // Submit form to PHP script
     $("#done").fadeIn("slow").delay(500).slideDown("slow", function() {
        ...
     });
   });

显然，在DOMready中直接将click侦听器添加到已存在（但隐藏）的元素中也更容易，而不是仅在fadeIn-callback中递归执行。

我在jQuery中有一个循序渐进的过程，有更好的方法来编写它吗？

3 个答案: