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完成其余的工作（隐藏，显示，淡化）。

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>

Answer 3

我编辑了@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;
  });

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

3 个答案: