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

此外，当我创建“返回按钮”功能时，似乎把自己搞糊涂了。这段代码根本不够好。你会如何处理？谢谢！

- Frank Castle

---

这更适合发布在http://codereview.stackexchange.com/网站上。 - Felix Kling

你的函数中每个语句都包含一个DOM查询。（顺便说一下，这很糟糕 :P） - Šime Vidas

+1 给 Felix，但我有两个建议：你附加事件太多次了（在某些其他事件处理程序中附加事件处理程序），并且你选择元素太多次了（你可以将它们缓存/保存到某些变量中，然后重复使用，除非你需要再次选择它们，因为某些东西已经改变）。 - Tadeck

https://dev59.com/yG025IYBdhLWcg3w6aUX - Jared Farrish

在事件处理程序中，你可以使用$(this)关键字代替$("#nextButton")。 - Okan Kocyigit

没问题，但是想一想如果你有10个步骤会发生什么:D。祝你好运，挑战自己也没关系。 - stefanz

Answer 1

我会使用jQuery来切换class="activeStep"，并使用CSS来隐藏、显示、淡化其余部分。

- Bastian Rang

---

感谢Boaz和stefanz，看了你们的例子帮了很多忙...但我对这一部分有点困惑：var t = $(this)， - Frank Castle

Answer 2

你可能想了解jQuery的prev()和next()方法。结合基于步骤的类名逻辑（而不是DOM id），这些方法可以非常轻松地缩短和简化你的代码。

一个粗略的详细示例：

$('#nextButton').click(
    function() {
        var current_step = $('#steps_container').find('.step:visible');
        var next_step    = current_step.next();
        if (next_step.length) {
            current_step.hide();
            next_step.fadeIn(250);
        }
    }
);

$('#prevButton').click(
    function() {
        var current_step = $('#steps_container').find('.step:visible');
        var prev_step    = current_step.prev();
        if (prev_step.length) {
            current_step.hide();
            prev_step.fadeIn(250);
        }

    }
);

这应该能很好地处理以下标记中的任意步骤：

<div id="steps_container">
    <div class="step">Step 1</div>
    <div class="step">Step 2</div>
    <div class="step">Step 3</div>
    <div class="step">Step 4</div>
    <div class="step">Step 5</div>
    <div class="step">Step 6</div>
    ...
</div>

---

只要@stefanz改进我的代码，一个更简单和更通用的方法就是将导航按钮的处理程序绑定到一个类，如下所示：

$('.steps_nav_buttons_bar .steps_nav_button').click(
    function() {
        var current_step = $('#steps_container').find('.step:visible'),
            new_step     = $(this).hasClass('next') ? current_step.next() : current_step.prev();

        if (new_step.length) {
            current_step.fadeOut('fast',function() { new_step.fadeIn('fast') })
        }
     }
);

这样做的好处是可以添加多组导航按钮，例如，如果您想在顶部和底部都有导航栏：

<div class="steps_nav_buttons_bar top_bar">
    <div class="steps_nav_button prev">Prev</div>
    <div class="steps_nav_button next">Next</div>
</div>

<div id="steps_container">
    <div class="step">Step 1</div>
    <div class="step">Step 2</div>
    <div class="step">Step 3</div>
    <div class="step">Step 4</div>
    <div class="step">Step 5</div>
    <div class="step">Step 6</div>
    ...
</div>

<div class="steps_nav_buttons_bar bottom_bar">
    <div class="steps_nav_button prev">Prev</div>
    <div class="steps_nav_button next">Next</div>
</div>

- Boaz

Answer 3

我修改了@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;
  });

- stefanz