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

我想創建一個測驗。爲此我有多個選擇題。我不想在同一頁面上顯示所有問題。我希望一次只顯示一個問題，並且單擊按鈕時，下一個部分中的問題應該出現並且上一個問題應該隱藏。最後，當用戶提交最後一個問題時，應該把它帶到基本的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>

來源

2015-04-04 Ashwini Purohit

我會建議在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"); 
    } 
    }); 
});

我試圖添加爲堆棧段，但不知何故沒有得到它的工作，因此以上小提琴代替。

更新：對於評論中的其他問題，您可以例如每個答案的值保存爲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顯示陣列作爲控制檯日誌消息。

來源

2015-04-04 09:02:26

我實現了你的代碼。它運行完美，但是如何在最後獲取值。我的意思是，一旦所有回覆記錄下來，那麼如何獲取每個回覆的值，然後檢查答案是否正確？ – 2015-04-04 09:57:27

也就是說，如何在表單中添加一個表單並將其轉到顯示所有響應的頁面「results.php」。在PHP中...像這裏http://jsfiddle.net/dzqj5jcq/ – 2015-04-04 10:15:12

@AshwiniPurohit剛剛更新了我的答案，並提供了將給定答案存儲爲'data'屬性值的建議。 – 2015-04-04 10:18:57

希望你可以用單個問題顯示第一頁。現在使用按鈕id作爲問題的下一個div ID。讓我告訴你，如果下一個按鈕id 2已被點擊下一個與id 2的div將被顯示，剩餘的div &按鈕小於3或更大，那麼3將被隱藏。最後，您可以確定最後一個完成按鈕的ID的最後一頁可以顯示。

來源

2015-04-04 08:26:39 DevLakshman

沒有發生。我想參加一個測驗。然後將結果顯示到result.php。 – 2015-04-04 10:31:40

此作品（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   
    } 
});

來源

2015-04-04 09:34:46 dsharew

它工作完美。但是如何獲取所有值？我的意思是，我想在「result.php」頁面上顯示所有提交的回覆。如何在頁面result.php中獲取所有提交的響應？ – 2015-04-04 10:12:58

發佈您的PHP代碼，並考慮接受答案，如果它適合你。 – dsharew 2015-04-04 10:16:30

我的result.php代碼應該顯示所有的響應。我的目標是進行測驗，最後輸出他們的評分。怎麼做？ – 2015-04-04 10:30:31

這是我的嘗試。代碼儘可能地被評論。

// 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結果處理部分，我建議你問，作爲一個單獨的問題。

來源

2015-04-04 10:52:30 SeinopSys

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

回答

相關問題