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

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

好吧..我挑战自己使用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);
                        }
                });
            });
        }); 
    }

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

解决方法

我编辑了@Boaz代码,现在 you get干净了,我想这可以帮助你更好地理解.我还添加了一些评论.

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;
  });