如何在单击按钮时显示一个分区，同时隐藏另一个分区
How to show one division on clicking button and hide another division at the same time?
我想创建一个测验。为此，我有多项选择题。我不想一次把所有的问题都显示在同一页上。我希望一次只显示一个问题，当点击按钮时，下一部分的问题应该出现，上一个问题应该隐藏。最后，当用户提交最后一个问题时，它应该把它带到基本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>
我建议在div元素中添加一个类，但这只是使用jQuery的当前标记的工作示例，下面是显示/隐藏部分的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("answerswer", answer);
$("div").hide();
if (current < questions - 1) {
$("div:eq(" + (current + 1) + ")").show();
} else {
var answers = [];
$("div").each(function(i){
answers[i] = $(this).data("answerswer");
});
console.log(answers);
alert("no questions left, go to results");
}
});
});
然后在所有问题CCD_ 9元素上循环以获取值并将它们添加到阵列中以用于进一步处理/检查每个答案是否为真。更新了Fiddle，将阵列显示为控制台日志消息。
希望您能够用一个问题显示第一页。现在使用buttons id作为问题的下一个div id。让我澄清一下，如果单击了id为2的下一个按钮，则会显示id为2和剩余的div&小于3或大于3的按钮将被隐藏。最后你可以确定最后一页的id最后一个完成按钮可以显示。
这很有效（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
}
});
这是我的尝试。只要可能，代码都会被注释。
// 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结果处理部分，我建议您将其作为一个单独的问题来问。
相关文章：
- 单击按钮后如何逐个调用分区，上一个分区将隐藏
- 如何在单击按钮时显示一个分区，同时隐藏另一个分区
- D3.js:将一个有响应的饼图放在其父分区的中心
- 所有Paragrahps在一个分区
- Jquery.每个分区通过另一个分区内的分区
- 如果有'It’点击一个特定的分区
- 如何使用jquery使用另一个html文件的内容更新页面分区
- 如何获取页面上所有图像的来源，然后将它们全部放在一个分区中
- 将选中的复选框复制到另一个分区中
- 如何在单击图像时在另一个分区中显示相关内容
- 确定一个可调整大小的分区，如果它在调整大小时保持其纵横比
- 正在获取另一个分区中的span内容
- 如何将ngRepeat内容复制到另一个分区中
- jQuery-在一个分区中查找第一个具有特定ID的分区
- 选择一个具有特定类和特定名称的分区
- 通过在另一个分区的谷歌地图信息窗口上单击按钮来更改分区的内容
- 将一个分区捕捉到另一个分区
- 导航到外部html页面的一个分区
- 在网页上一次只打开一个分区的脚本
- ruby on rails -如何对一个大的Javascript文件进行作用域或分区
