jquery - 多步骤表格

我正在学习制作多步骤表格。我用这个jQuery代码：

    $('nav a:last').replaceWith('<a href="#" id="navbtnnext" class="navbtnnext_0">');

    $('form').submit(function(){
        return false;
    });

    $('button.submit_step1, nav a.navbtnnext_0').click(function(){
        $('nav a:first').replaceWith('<a href="#" id="navbtnprev"></a>');
        $('.step1').slideUp();
        $('.step2').slideDown();
        $('nav a#navbtnnext').removeClass('navbtnnext_0').addClass('navbtnnext_1');
    });

    $('button.submit_step2, nav a.navbtnnext_1').click(function(){
        $('.step2').slideUp();
        $('.step3').slideDown();
        $('nav a#navbtnnext').removeClass('navbtnnext_1').addClass('navbtnnext_2');
    });

    $('button.submit_step3, nav a.navbtnnext_2').click(function(){
        $('.step2').slideUp();
        $('.step3').slideDown();
        $('nav a#navbtnnext').removeClass('navbtnnext_2').addClass('navbtnnext_3');
    });

当我单击nav a.navbtnnext_1时为什么.step2不能更改为.step3？我的代码有问题吗？请帮我..

这是我的html代码：

       <nav class="grid_12">
            <a id="navbtnprevdisabled"></a>
            <a id="navbtnnextdisabled"></a>
        </nav>
        <div class="clear"></div>
        <div id="main" class="grid_12" role="main">
            <section id="form">
                <form>
                    <div class="step1">
                        test 1
                        <hr>
                        <button class="submit_step1">Next</button>
                    </div>
                    <div class="step2">
                        test 2
                        <hr>
                        <button class="submit_step2">Next</button>
                    </div>
                    <div class="step3">
                        test 3
                        <hr>
                        <button class="submit_step3">Next</button>
                    </div>

最佳答案

那里有那些硬编码的按钮，很难缩放表单。如果只使用类而不是按钮的ID，那会更好。

这是我能想到的最基本的例子。

$(document).ready(function(){

  $('.btnNext').click(function(e){
    e.preventDefault();
    $(this).closest('fieldset').slideUp().next().slideDown();

  });
  $('.btnPrev').click(function(e){
    e.preventDefault();
    $(this).closest('fieldset').slideUp().prev().slideDown();

  });
});

这是与之配套的html。

  <form>
    <fieldset>
      <legend>Step 1</legend>
      <input /><br/>
      <button class="btnNext">Next</next>
    </fieldset>
    <fieldset class="hidden">
      <legend>Step 2</legend>
      <input /><br/>
      <button class="btnPrev">Previous</button><button class="btnNext">Next</button>
    </fieldset>
    <fieldset  class="hidden">
      <legend>Step 3</legend>
      <input /><br/>
      <button class="btnPrev">Previous</button><button class="btnNext">Next</button>
    </fieldset>
    <fieldset  class="hidden">
      <legend>Step 4</legend>
      <input /><br/>
      <button class="btnPrev">Previous</button><button class="btnNext">Next</button>
    </fieldset>
    <fieldset  class="hidden">
      <legend>Step 5</legend>
      <input /><br/>
      <button class="btnPrev">Previous</button><input type="submit" />
    </fieldset>
  </form>

最后，这里是一个有效示例http://jsbin.com/oyoboc/2/edit的链接