2

セットアップ プロセスを通じてユーザーをガイドする段階的なプロセスがあります。すべてのコードを 1 ページに収めたい (つまり、step1.php、step2.php、step3.php ではなく、setup.php がある)。次のようにjQueryでコーディングしました：（一度に1つのステップしか示していません）

$(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() {
        ...
    });
 })))));

もちろん、ループ（または再帰関数）を使用してステップを作成することもできます。の2つのパラメータを変更する場合は、 reducegetStepを使用できます。

 ["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() {
        ...
     });
   });

明らかに、fadeIn-callbackでのみ再帰的に行うのではなく、DOMreadyの既存の（ただし非表示の）要素にクリックリスナーを追加する方が簡単です。

于 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 に答える