jQuery内の前のHTMLセクションを非表示にします

Question

以下のコードは、指定された回答が正しいかどうかを確認するために使用されます。答えはラジオボタンを使用して選択できます。次のボタンをクリックすると、最初の質問を隠して、次の質問を表示する必要があります。私はクリックされ、現在の質問が隠されなければならない場合、前の質問を表示するはずの別のボタン "前"が必要です。

<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); 
     }); 

Answer 1

これをチェックしてください：

を、私たちはあるどの質問に簡単に見ることが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); 
      } 
      }); 

     } 

     });