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

        }

      });

隐藏jQuery中的前一个html部分

1 个答案: