如何在單擊按鈕時顯示一個分區並同時隱藏另一個分區？

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＆小於3或大於3的按鈕將被隱藏。 最后，您可以通過顯示最后完成按鈕的ID來確定最后一頁。

Answer 2

我建議向div元素添加一個類，但作為使用jQuery的當前標記的工作示例，在顯示/隱藏部分的Fiddle示例之后。

隱藏所有div部分與CSS，顯示第一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

這有效（在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

這是我的嘗試。 該代碼將在可能的地方添加注釋。

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

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

 <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>

至於PHP結果處理部分，我建議您將其作為一個單獨的問題提出。

如何在單擊按鈕時顯示一個分區並同時隱藏另一個分區？

問題描述

4 個解決方案

解決方案1
0 2015-04-04 08:26:39

解決方案2
0 已采納 2015-04-04 09:02:26

解決方案3
0 2015-04-04 09:34:46

解決方案4
0 2015-04-04 10:52:30

如何在單擊按鈕時顯示一個分區並同時隱藏另一個分區？

問題描述

4 個解決方案

解決方案1 0 2015-04-04 08:26:39

解決方案2 0 已采納 2015-04-04 09:02:26

解決方案3 0 2015-04-04 09:34:46

解決方案4 0 2015-04-04 10:52:30

解決方案1
0 2015-04-04 08:26:39

解決方案2
0 已采納 2015-04-04 09:02:26

解決方案3
0 2015-04-04 09:34:46

解決方案4
0 2015-04-04 10:52:30