我有一个测验布局,可以从数据库获取问题和答案。
我目前有一个下一个按钮来浏览问题,但是我希望拥有它,以便在选择答案时,它会转到下一个问题。
每个问题/答案集周围都有这个 div,其中 id 是问题的 id。
<div class="question container center" id="1" style="display: none;">
<h1>Question</h1>
Answer
Answer
Answer
Answer
</div>
答案按钮如下所示:
<a class="waves-effect waves-light btn-large blue-grey lighten-2 btn-width mcqtest">Answer</a>
当前使用的 Jquery 是这样的:
$('#2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12, #13, #14, #15, #16, #17, #18, #19, #20, #21, #22, #23, #24, #25 ').hide();
$('#next').click(function(){
//code
var curr = $(".question:visible");
var next = curr.next(".question");
next.show();
curr.hide();
if (!next.next(".question").length) {
$("button").attr('disabled', 'disabled');
$("button").text("End of Test");
}
});
最佳答案
使用 prop()
而不是 attr()
,我还做了一些其他更改。
$('.question').slice(1).hide();
$('#next, a.mcqtest').click(function(){
//code
var curr = $(".question:visible");
var next = curr.next(".question");
next.show();
curr.hide();
if (!next.next(".question").length) {
$("button").prop('disabled', true);
$("button").text("End of Test");
}
});
关于javascript - 点击时隐藏一个div并显示另一个直到最后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35550561/