Question

我想创建一个测验。为此我有多项选择题。我不想一次在同一页面上显示所有问题。我希望一次只显示一个问题，当点击按钮时，下一个分区中的问题应该出现，之前的问题应该隐藏。最后，当用户提交最后一个问题时，它应该将它带到基本php的结果页面。但如何显示/隐藏部分？我是这些中的新手。请不要把我当作专业人士。

这是我的代码。

    <html>
<body>
    <div id="div1">
    <input type="radio" name="que1" value="Option1">
    <input type="radio" name="que1" value="Option2">
    <input type="radio" name="que1" value="Option3">
    <input type="radio" name="que1" value="Option4">
    <button id ="button1">Next</button>
    </div>

    <div id="div2">
    <input type="radio" name="que2" value="Opt1">
    <input type="radio" name="que2" value="Opt2">
    <input type="radio" name="que2" value="Opt3">
    <input type="radio" name="que2" value="Opt4">
    <button id ="button2">Next</button>
    </div>
    <div id="div3">
    <input type="radio" name="que3" value="1">
    <input type="radio"  name="que3"value="2">
    <input type="radio"  name="que3"value="3">
    <input type="radio"  name="que3" value="4">
    <button id ="button3">Next</button>
    </div>
</body>
</html>

Answer 1

希望您能够通过一个问题显示第一页。现在使用按钮id作为问题的下一个div id。让我清楚一下，如果点击了id为2的下一个按钮，则会显示id为2的下一个div，并保留div＆amp;小于3或大于3的按钮将被隐藏。最后，您可以确定最后一页按最后一个完成按钮的ID显示。

Answer 2

我建议在div元素中添加一个类，但是作为使用jQuery的当前标记的工作示例，对于show / hide部分，请遵循示例Fiddle。

使用CSS隐藏所有div部分，最初显示第一个div，点击该按钮时，隐藏所有div个元素，并根据基础显示下一个div当前div的索引，如果它不是最后一个div /问题。

CSS：

div {
  display:none;
}

jQuery的：

$(document).ready(function () {
  $("div:eq(0)").show();
  $("button").click(function () {
    var questions = $("div").length;
    var current = $(this).parent("div").index();
    $("div").hide();
    if (current < questions - 1) {
        $("div:eq(" + (current + 1) + ")").show();
    } else {
        alert("no questions left, go to results");
    }
  });
});

我已经尝试将其添加为堆栈代码，但由于未知原因无法使其工作，因此在Fiddle之上。

更新：对于评论中的其他问题，您可以例如将每个答案的值保存为data属性，如下所示：

$(document).ready(function () {
  $("div:eq(0)").show();
  $("button").click(function () {
    var questions = $("div").length;
    var current = $(this).parent("div").index();
    var answer = $(this).parent("div").find("input:checked").val();
    alert(answer);
    $(this).parent("div").data("answer", answer);
    $("div").hide();
    if (current < questions - 1) {
        $("div:eq(" + (current + 1) + ")").show();
    } else {
        var answers = [];
        $("div").each(function(i){
        answers[i] =  $(this).data("answer");
        });
        console.log(answers);
        alert("no questions left, go to results");
    }
  });
});

然后遍历所有问题div元素以获取值并将它们添加到数组中以进一步处理/检查每个答案是否为真。更新了Fiddle，将阵列显示为控制台日志消息。

Answer 3

这有效（demo on jsfiddle）我对你的 html 做了一点改动，看看这里：

<body>
    <div class = "question">
    First Question
    <input type="radio" name="que1" value="Option1">
    <input type="radio" name="que1" value="Option2">
    <input type="radio" name="que1" value="Option3">
    <input type="radio" name="que1" value="Option4">
    <button class = "btn-next" data-question-number = "1">Next</button>
    </div>

    <div class = "question">
    Second Question
    <input type="radio" name="que2" value="Opt1">
    <input type="radio" name="que2" value="Opt2">
    <input type="radio" name="que2" value="Opt3">
    <input type="radio" name="que2" value="Opt4">
    <button class = "btn-next" data-question-number = "2">Next</button>
    </div>
    <div class = "question">
    Third Question
    <input type="radio" name="que3" value="1">
    <input type="radio"  name="que3"value="2">
    <input type="radio"  name="que3"value="3">
    <input type="radio"  name="que3" value="4">
    <button  class = "btn-next" data-question-number = "3">Next</button>
    </div>

<强>的CSS：

.question{
    display:none;
}

jquery：

//show the first question on the page loads
$("button.btn-next").eq(0).parent().fadeIn()

$(".btn-next").on("click", function(){
    var question_number = $(this).data("question-number")
    // question_number = index + 1
    var next_question = $("button.btn-next").eq(question_number).parent()

    if(question_number < $(".question").length){
        var parent_row =$(this).parent()

        parent_row.hide()
        next_question.fadeIn()

    }else{
        //your logic here           
    }
});

Answer 4

这是我的尝试。尽可能对代码进行评论。

＆＃13;

// This is short for $(document).ready(...)
$(function(){
  // Store our questions in a variable
  var $questions = $('.question');
  
  // Show the first question
  $questions.first().show();
  
  // When clicking the <button> in ny of the questions...
  $questions.find('button').on('click',function(){
    // ...store the currently visible question, then...
    var $visibleQuestion = $questions.filter(':visible');
    
    // ...if there's a next question....
    var $nextQuestion = $visibleQuestion.next('.question');
    console.log($nextQuestion);
    if ($nextQuestion.length === 1){
      // ...hide the visible question....
      $visibleQuestion.hide();
      // ..and show the next.
      $nextQuestion.show();
    }
    // If you want, you can check for quiz completition in this else section
    else {
      // Quiz finished
      alert('You finished the quiz!');
    }
  });
  // Optionally, change the text of the last question's button
  $questions.last().find('button').text('Finish Quiz');
});

＆＃13;

/* Initially hide all questions, we'll show them later with JavaScript */
.question { display: none }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- The <div> elements now have the class "question" -->
<div id="div1" class="question">
    <input type="radio" name="que1" value="Option1">
    <input type="radio" name="que1" value="Option2">
    <input type="radio" name="que1" value="Option3">
    <input type="radio" name="que1" value="Option4">
    <button id ="button1">Next</button>
</div>
<div id="div2" class="question">
    <input type="radio" name="que2" value="Opt1">
    <input type="radio" name="que2" value="Opt2">
    <input type="radio" name="que2" value="Opt3">
    <input type="radio" name="que2" value="Opt4">
    <button id ="button2">Next</button>
</div>
<div id="div3" class="question">
    <input type="radio" name="que3" value="1">
    <input type="radio"  name="que3"value="2">
    <input type="radio"  name="que3"value="3">
    <input type="radio"  name="que3" value="4">
    <button id ="button3">Next</button>
</div>

＆＃13;

对于PHP结果处理部分，我建议您将其作为一个单独的问题。

如何在点击按钮上显示一个分区并同时隐藏另一个分区？

4 个答案: