隐藏点击并显示另一个直到最后

Question

我有一个测验布局，从数据库中获取问题和答案。

我目前有一个下一个按钮来通过这些问题，但我想这样做，所以当选择一个答案时，它会转到下一个问题。

每个问题/答案集都有这个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的IM是这样的：

$('#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"); 
    } 
}); 

Answer 1

使用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"); 
    } 
}); 

Answer 2

首先，如果可能的变化ID的（＃2，＃3等），以一个类。 下一步 - 从$（'＃next'）提取您的匿名函数，点击，然后将点击监听器添加到每个答案链接，这样每次任何人选择答案时都会触发您的“下一个问题”函数。

例如（代码不进行身份的改变）：

function nextQuestion(){ 
    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"); 
    } 
} 

$('#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(nextQuestion); 
$('a.mcqtest').click(nextQuestion); 

Answer 3

添加这个脚本，当你要求它必须工作。

$('a.mcqtest').on('click',function(e){ 
    e.preventDefault(); 
    $('#next').trigger('click'); 
});