Question

我正在学习制作一个多步形式。我使用这个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>

Answer 1

$('body').delegate('button.submit_step2, nav a.navbtnnext_1', 'click', function(){
    $('.step2').slideUp();
    $('.step3').slideDown();
});

在动态更改课程时必须使用实时或委托

Answer 2

在那里使用那些硬编码按钮会使您的表单难以扩展。如果你只使用类而不是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

的链接

Answer 3

这里有一个完整的简单示例，不需要jQuery。

＆＃13;

function shows_form_part(n){
    var i = 1, p = document.getElementById("form_part"+1);
    while (p !== null){
        if (i === n){
            p.style.display = "";
        }
        else{
            p.style.display = "none";
        }
        i++;
        p = document.getElementById("form_part"+i);
    }
}

function submit_form() {
	var sum = parseInt(document.getElementById("num1").value) +
            parseInt(document.getElementById("num2").value) +
            parseInt(document.getElementById("num3").value);
  alert("Your result is: " + sum);
}

＆＃13;

<body onload="shows_form_part(1)">
<form>
  <div id="form_part1">
    Part 1<br>
    <input type="number" value="1" id="num1"><br>
    <!--form elements 1-->
    <button type="button" onclick="shows_form_part(2)">&raquo;</button>
  </div>
  <div id="form_part2">
    Part 2<br>
    <input type="number" value="2" id="num2"><br>
    <!--form elements 2-->
    <button type="button" onclick="shows_form_part(1)">&laquo;</button>
    <button type="button" onclick="shows_form_part(3)">&raquo;</button>
  </div>
  <div id="form_part3">
    Part 3<br>
    <!--form elements 3-->
    <input type="number" value="3" id="num3"><br>
    <button type="button" onclick="shows_form_part(2)">&laquo;</button>
    <button type="button" onclick="submit_form()">Sum</button>
  </div>
</form>
</body>

＆＃13;

多步形式

3 个答案: