Question

考虑多个问题的多项选择测验......以下是我的html的组织方式。

<div class="question" id="question1">
        <div class="row">
            <div class="name name1 col-XS-12 col-sm-6 col-lg-3" data-answer="correct">Answer 1</div>
            <div class="name name2 col-XS-12 col-sm-6 col-lg-3">Answer 2</div>
            <div class="name name3 col-XS-12 col-sm-6 col-lg-3">Answer 3</div>
            <div class="name name4 col-XS-12 col-sm-6 col-lg-3">Answer 4</div>
        </div>
</div>
<div class="question" id="question2">
        <div class="row">
            <div class="name name1 col-XS-12 col-sm-6 col-lg-3">Answer 1</div>
            <div class="name name2 col-XS-12 col-sm-6 col-lg-3">Answer 2</div>
            <div class="name name3 col-XS-12 col-sm-6 col-lg-3" data-answer="correct">Answer 3</div>
            <div class="name name4 col-XS-12 col-sm-6 col-lg-3">Answer 4</div>
        </div>
</div>

到目前为止，这是我的jQuery ......

$(".name").click(function(){
    if($(this).data("answer")){
        $(this).addClass("correct"); //just changes color of div
    } else {
        $(this).addClass("incorrect"); //just changes color of div
    }
});

我尝试在父元素上使用.off（）但是没有用。我见过unbind的解决方案，但这是一个旧的解决方案吗？我见过一些可能与旧浏览器不兼容的CSS指针事件解决方案。那么，一旦点击了正确的答案后，禁用＃question1的答案的最佳方法是什么？

感谢。

Answer 1

使用.off()取消绑定所有兄弟div的点击：

$(".name").click(function () {
    if ($(this).data("answer")) {
        $(this).addClass("correct"); //just changes color of div
    } else {
        $(this).addClass("incorrect"); //just changes color of div
    }
    $(this).siblings('div').off('click')
});

<强> jsFiddle example

我希望在参加考试前没有人看过来源......

Answer 2

$(".question").on('click', '.name', function(){

    var $e = $(this);        // Current choice
    var $p = $e.parent();    // Parent element

    // Check if the question has already been answered
    if ($p.find('.correct').length !== 0 || $p.find('.incorrect').length !== 0) {
        alert('You only have one guess!');
        return;   
    }

    // Add class
    $e.addClass($e.data('answer') ? 'correct' : 'incorrect');

});

Demo

单击正确答案后禁用按钮单击？

2 个答案: