在页面上显示下一个元素，并在单击时隐藏当前元素
jQuery - Function to display next element on page and hide the current one on click
我一直在尝试创建一个函数，允许，一旦单选按钮被选中，检查ID是否正确，然后在另一个div(不是下一个)中显示后续按钮。
单击后续按钮后，它将隐藏前一个div并显示当前div的其余内容。
我试图创建一个脚本，无论我想要多少容器都可以这样做。因此，您实际上可以遍历页面显示和隐藏元素，只需单击并根据答案进行检查。
然而，我不知道如何在第一次实例之后实现这一点。任何帮助都将非常感激。下面是我的代码:
$(document).ready(function () {
$(this).find(".check-answer-button").click(function () {
if ($("#correct-answer").is(":checked")) {
if ($(".wrong-answer").is(":visible")) {
$(".wrong-answer").hide();
}
$(".right-answer").show();
$(".next-question-div:first").show();
$(".next-question-button").click(function () {
$(".question-radio-button-div:first").show(500);
$(".answer-div:first").show(500);
$(".question-div:nth-child(1)").hide();
$(".next-question-button").hide();
if ($("h4").is(":visible")) {
$("h4").hide();
}
});
}
else {
$(".wrong-answer").show();
}
});
});.right-answer,
.wrong-answer {
display: none;
}
.next-question-div {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- QUESTION 1 -->
<div class="question-div" id="question-one">
<div class="row">
<div class="col-12">
<p>Q1</p>
<ul>
<li>
<input type="radio" name="radio" value="value1" id="correct-answer">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1">C
</li>
</ul>
</div>
</div>
<div class="row" id="answerswer-one-div">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4> </div>
</div>
</div>
<!-- QUESTION 2 -->
<div class="question-div" id="question-two">
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
<div class="row question-radio-button-div">
<div class="col-12">
<p>Q2</p>
<ul>
<li>
<input type="radio" name="radio" value="value1">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1" id="correct-answer">C
</li>
</ul>
</div>
</div>
<div class="row answer-div" id="answerswer-two-div">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4> </div>
</div>
</div>解决这个问题的最好方法是什么?由于
我建议你改正你的问题。这个模板必须对所有问题有效，但每个问题都有不同的问题/答案。
避免使用重复的ID，并考虑next按钮是每个问题的一部分。只有最后一个问题没有下一个问题。
考虑使用像answer="true"这样的属性来代替ID。
尽量避免把HTML和bootstrap混在一起。
你正在寻找的一个简单的演示可以是:
$(document).ready(function (e) {
$(".next-question-button").on('click', function (e) {
var cachedDiv = $(this).closest('.question-div');
cachedDiv.fadeOut(500, function () {
cachedDiv.nextAll('.question-div:first').fadeIn(500);
});
});
$(".check-answer-button").on('click', function (e) {
var cachedDiv = $(this).closest('.question-div');
if (cachedDiv.find(':radio:checked').attr('answer') == 'true') {
$(this).nextAll(".wrong-answer").hide();
$(this).nextAll(".right-answer").show();
cachedDiv.find('.next-question-div').show();
}
else {
$(this).nextAll(".wrong-answer").show();
}
});
$(".question-div:gt(0)").hide();
});.right-answer,
.wrong-answer {
display: none;
}
.next-question-div {
display: none;
}<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- QUESTION 1 -->
<div class="question-div">
<div class="row">
<div class="col-12">
<p>Q1</p>
<ul>
<li>
<input type="radio" name="radio" value="value1" answer="true">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1">C
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4></div>
</div>
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
<!-- QUESTION 2 -->
<div class="question-div">
<div class="row">
<div class="col-12">
<p>Q2</p>
<ul>
<li>
<input type="radio" name="radio" value="value1">A
</li>
<li>
<input type="radio" name="radio" value="value1" answer="true">B
</li>
<li>
<input type="radio" name="radio" value="value1">C
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4></div>
</div>
<div class="next-question-div">
<button type="button" class="next-question-button">Next Question</button>
</div>
</div>
<!-- QUESTION 3 -->
<div class="question-div">
<div class="row">
<div class="col-12">
<p>Q3</p>
<ul>
<li>
<input type="radio" name="radio" value="value1">A
</li>
<li>
<input type="radio" name="radio" value="value1">B
</li>
<li>
<input type="radio" name="radio" value="value1" answer="true">C
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="check-answer-button">Check Answer</button>
<h4 class="right-answer">Well done this is correct</h4>
<h4 class="wrong-answer">Sorry, try again</h4></div>
</div>
<div class="next-question-div">
<button type="button" class="next-question-button">See results</button>
</div>
</div>
<!-- QUESTION ENDED -->
<div class="question-div">
<div class="row">
<div class="col-12">
<p>FINISH</p>
</div>
</div>
</div>相关文章：
- 对同一类中的所有元素单击一次
- 元素单击处理程序由一个神秘的函数取消设置
- 在处理元素单击事件期间，在循环内部调用window.open(）
- JS-是否可以获得元素单击位置的确切宽度
- 使用 jQuery 创建动态元素 单击事件始终返回 for 循环中的最后一个索引
- 选中父元素单击上的复选框
- 在窗口和其他元素单击时隐藏
- Polymerjs 的自定义菜单元素单击事件
- 使用 javascript 函数查找元素单击的类
- 元素单击仅使用 javascript
- 等待文档鼠标按下完成，然后元素单击才能开始
- 由于父元素的顶部和位置，子元素单击不起作用
- Jquery-在共享相同类名的其他元素之间选择一个元素(单击时）
- 目标元素单击子元素，获取父属性
- 根据元素单击更改选择选项值
- 为listview上动态生成的元素单击event
- 扩展原生元素单击事件
- 可以被许多元素使用的Javascript函数，然后区分哪个元素单击了它
- 当元素单击时隐藏iframe
- 按钮元素单击事件以切换类不起作用
