8

我是一个新程序员，所以如果这个业余爱好者......我正在寻找一些方向，或者可能是一些想法。我的目标是让我学习，所以任何朝着正确方向的推动都会受到重视。

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

此外，在创建“后退按钮”功能时，我似乎把自己搞砸了。这段代码根本不够好。你会如何处理这个问题？谢谢！！！

4

3 回答 3

4

我只会使用 jquery 来切换一个 class="activeStep" 并用 css 完成其余的（隐藏、显示、褪色）。

于 2012-12-31T00:20:53.417 回答
3

您可能想研究 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>
于 2012-12-31T00:37:11.650 回答
2

我编辑了@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;
  });
于 2012-12-31T01:05:08.370 回答