jQuery - 有没有更简单的方法来写这个？

Question

我是一个新的程序员,如果这个业余爱好者如此迷茫......我正在寻找一些方向,或者也许是一些想法.我这里的目标是让我学习,所以任何正确方向的推动都会得到应用.

好吧..我挑战自己使用jQuery为简单的注册表单创建一个类似控件的"向导".我可以很好地完成这些步骤,但是我正在查看我的代码而且我不能帮助但是想一想; "必须有一种更好,更容易和更恰当的方式来做到这一点".这就是我所拥有的.

function toggleStep(){
        $("#nextButton").click(function(){
            if($("#nextButton").name = "step1"){
                $("#nextButton").attr("name", "step2");

                $("#backButton").attr("name", "step1").css("display", "inline");

                $("#step1").hide();
                $("#step2").show("fade", 250);
            }
            $("#nextButton").click(function(){
                if($("#nextButton").name = "step2"){
                    $("#nextButton").attr("name", "step3");

                    $("#backButton").attr("name", "step2");

                    $("#step2").hide();
                    $("#step3").show("fade", 250);
                }
                    $("#nextButton").click(function(){
                        if($("#nextButton").name = "step3"){
                            $("#nextButton").attr("name", "step4");
                            $("#nextButton").css("display", "none");

                            $("#backButton").attr("name", "step3");

                            $("#step3").hide();
                            $("#step4").show("fade", 250);
                        }
                });
            });
        }); 
    }

此外,我似乎在创建"后退按钮"功能时搞砸了自己.这段代码根本不够好.你会怎么做？谢谢!!!

Answer 1

我编辑了@Boaz 代码，现在你得到了一些干净的东西，我想这也可以帮助你更好地理解。我还添加了一些评论。

jQuery 代码变成

 $('#next, #prev').click(function(){
    var t = $(this),
        current = $('#steps_container').find( '.step:visible' ),
        stepGo = ( t.attr( 'id' ) == 'next' ? current.next() : current.prev() );

    if ( stepGo.length ) {
      current.fadeOut( 'slow', function(){

        stepGo.fadeIn( 'slow' );
      });
    };
    return false;
  });