在jQuery中隐藏以前的html部分

<div id="question_2" class='questions'>
<h2 id="question_2">2.Questions</h2>
<div class='align'>
<input type="radio" value="1" id='radio1_2' name='2'>
<label id='ans1_2' for='1'>Answer 1</label>
<br/>
<input type="radio" value="2" id='radio2_2' name='2'>
<label id='ans2_2' for='1'>Answer 2</label>
<br/>
<input type="radio" value="3" id='radio3_2' name='2'>
<label id='ans3_2' for='1'>Answer 3</label>
<br/>
<input type="radio" value="4" id='radio4_2' name='2'>
<label id='ans4_2' for='1'>Answer 4</label>
<input type="radio" checked='checked' value="5" style='display:none' id='radio4_2' name='2'>
</div>
<br/>
<input type="button" id='next2' value='Next' name='question' class='button'/>
<input type="button" id="previous" value="Previous" name="question" class="button"/>
</div>  
      $(document).ready(function(){
            $('#demo1').stopwatch().stopwatch('start');
            var steps = $('form').find(".questions");
            var count = steps.size();
            steps.each(function(i){
                hider=i+2;
                if (i == 0) {   
                    $("#question_" + hider).hide();
                    createNextButton(i);
                }
                else if(count==i+1){
                    var step=i + 1;
                    //$("#next"+step).attr('type','submit');
                    $("#next"+step).on('click',function(){
                       submit();
                    });
                }
                else{
                    $("#question_" + hider).hide();
                    createNextButton(i);
                }
            });
            function submit(){
                 $.ajax({
                                type: "POST",
                                url: "ajax.php",
                                data: $('form').serialize(),
                                success: function(msg) {
                                  $("#quiz_form,#demo1").addClass("hide");
                                  $('#result').show();
                                  $('#result').append(msg);
                                }
                 });
            }
            function createNextButton(i){
                var step = i + 1;
                var step1 = i + 2;
                $('#next'+step).on('click',function(){
                    $("#question_" + step).hide();
                    $("#question_" + step1).show();
                });
            }
            setTimeout(function() {
                  submit();
            }, 50000);
        });

检查这个:

我使用currentStep输入很容易看到我们在哪个问题上。

如果你喜欢下一个或上一个按钮，你可以检查你是在第一个问题还是在最后一个问题上隐藏或显示下一个和上一个按钮。

当你在最后一个问题，你点击下一个，它会提出提交。我把它改成了一个提醒来查看它。

https://jsfiddle.net/netvicious/7hzgdzcp/

<input type='text' id='currentStep' value='1'>
<div id="question_1" class='questions'>
  <h2>Question 1</h2>
  <div class='align'>
    <input type="radio" value="1" id='radio1_1' name='1' />
    <label id='ans1_1' for='1'>Answer 1</label>
    <br/>
    <input type="radio" value="2" id='radio2_1' name='1' />
    <label id='ans2_1' for='1'>Answer 2</label>
    <br/>
    <input type="radio" value="3" id='radio3_1' name='1' />
    <label id='ans3_1' for='1'>Answer 3</label>
    <br/>
    <input type="radio" value="4" id='radio4_1' name='1' />
    <label id='ans4_1' for='1'>Answer 4</label>
  </div>
</div>
<div id="question_2" class='questions'>
  <h2>Question 2</h2>
  <div class='align'>
    <input type="radio" value="1" id='radio1_2' name='2' />
    <label id='ans1_2' for='2'>Answer 1</label>
    <br/>
    <input type="radio" value="2" id='radio2_2' name='2' />
    <label id='ans2_2' for='2'>Answer 2</label>
    <br/>
    <input type="radio" value="3" id='radio3_2' name='2' />
    <label id='ans3_2' for='2'>Answer 3</label>
    <br/>
    <input type="radio" value="4" id='radio4_2' name='2' />
    <label id='ans4_2' for='2'>Answer 4</label>
  </div>
</div>
<br/>
<input type="button" id='next' value='Next' name='question' class='button' />
<input type="button" id="previous" value="Previous" name="question" class="button" />
</div>
$(document).ready(function() {
      steps = $('.questions').size();
      $('.questions').hide();
      $("#question_1").show();
      $('#next').on('click', function() {
          $('.questions').hide();
          elem = parseInt(parseInt($('#currentStep').val()) + 1);
          if (elem == steps + 1) {
            submit(); // If the current one was the last submit 
          } else {
            $("#question_" + elem).show();
            $('#currentStep').val(elem);
          }
         });
        $('#previous').on('click', function() {
          elem = parseInt(parseInt($('#currentStep').val()) - 1);
          if (elem == 0) return; // It was the first question so no previous one 
          $('.questions').hide();
          $("#question_" + elem).show();
          $('#currentStep').val(elem);
        });
        function submit() {
            alert('posting');
          exit;
          $.ajax({
            type: "POST",
            url: "ajax.php",
            data: $('form').serialize(),
            success: function(msg) {
              $("#quiz_form,#demo1").addClass("hide");
              $('#result').show();
              $('#result').append(msg);
            }
          });
        }
      });