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

时间:2016-02-22 09:56:17

标签: javascript php jquery

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

我目前有一个下一个按钮来解决问题,但是我希望这样做,以便在选择答案时,它会转到下一个问题

每个问题/答案集都有这个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");
    }
});

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

首先,如果可能,将id(#2,#3等)更改为单个班级。 接下来 - 从$(&#39;#next&#39;)中提取你的匿名函数。点击,然后在每个答案链接中添加点击监听器,这样就会激活你的下一个问题&#34;每当有人选择回答时都会发挥作用。

例如(没有更改ID的代码):

An exception has been thrown during the rendering of a template ("Some mandatory parameters are missing ("id") to generate a URL for route "movie_delete".") in movies/index.html.twig at line 10.

答案 2 :(得分:2)

添加此脚本,它必须按您的要求运行。

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