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

我只会使用 jquery 来切换 class="activeStep"并使用 css 完成其余的操作(隐藏、显示、淡入淡出)。