jQuery에서 단계별 프로세스가 있습니다. 코드를 작성하는 더 좋은 방법이 있습니까?

Question

설치 프로세스를 안내하는 단계별 프로세스가 있습니다. 한 페이지에 들어있는 모든 코드를 원합니다 (즉, setup1.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

사용자가 변수에 저장하는 단계를 저장하고 코드를 더 간단하게 만들 수 있다고 생각합니다.

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

Answer 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 
} 

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

은 물론 당신은 단계를 구축하는 루프 (또는 심지어 recursice 기능)을 사용할 수 있습니다. 당신이 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 콜백에서만 재귀 적으로 수행하는 대신에.