Блог

Подумайте о тесте с несколькими вариантами ответов с несколькими вопросами… Вот как организован мой 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 после нажатия правильного ответа?

Спасибо.

Используется .off() для отмены привязки щелчка ко всем дочерним разделам с помощью:

 $(".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

Я надеюсь, что никто не смотрит на источник, прежде чем проходить ваш тест…

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

});
  

ДЕМОНСТРАЦИЯ