2

我有一个循序渐进的过程来指导用户完成设置过程。我想要一页中包含的所有代码（这意味着我有 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() {

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

是的，我意识到这非常丑陋，但我不知道另一种方法吗？谁能推荐一个更好的方法？

4

3 回答 3

2

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

使用您的示例，这里是前几个步骤：

$(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
}
于 2012-08-01T20:03:46.553 回答
0

正如您自己注意到的那样，代码重复以下模式：

$("#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 中立即将点击​​侦听器添加到已经存在的（但隐藏的）元素也更容易，而不是仅在fadeIn-callback 中递归执行。

于 2012-08-01T20:14:27.000 回答
0

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

switch (step) 
{ 
   case '1': $("#intro").fadeOut("fast").delay(500).slideUp("fast");
   case '2': $("#eula").fadeOut("fast").delay(500).slideUp("fast");
   ...
}
于 2012-08-01T20:02:45.313 回答