javascript - 单击时停用页面的一部分

Question

我正在尝试创建 Buzzfeed 风格的测验。有没有办法在用户点击答案时停用页面的一部分，这样用户就不能再点击同一个问题的替代选项，从而扭曲测试的最终分数。

我发现了一些类似的主题 here和 here但我不想添加叠加层，并且我没有在代码中使用输入，所以我想知道是否有替代路线。

I created a codepen here http://codepen.io/kkoutoup/pen/ByGEoQ

$(document).ready(function(){
//create an array to store correct answers
var totalCorrect = [];

$('li').click(function(){

    //caching variables
    var $parent = $(this).parent();
    var $span = $(this).find('.fa');
    //check for .correct class
        //if yes
        if($(this).hasClass('correct')){
            //add .correctAnswer class
            $(this).addClass('correctAnswer');
            //find next span and change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of siblings
            $(this).siblings().addClass('fade');
            //show answerText
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.show();
            $toShowFalse.remove();
            //add 1 to total correct array
            totalCorrect+=1;
            //get array's length
            var $finalScore = totalCorrect.length;
            console.log($finalScore);
        }else{
            //add .wrongAnswer class
            $(this).addClass('wrongAnswer').addClass('fade');
            //change icon
            $span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
            //reduce opacity of its siblings
            $(this).siblings().addClass('fade');
            //show wrong Message
            var $answerReveal= $parent.next('.answerReveal').show();
            var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
            var $toShowFalse = $answerReveal.find('.quizzAnswerF');
            $toShowCorrect.remove();
            $toShowFalse.show();
            //locate correct and add respective class
            $parent.find('.correct').addClass('correctAnswer');

        };
});
});//end dom ready

有什么想法吗？

谢谢

Answer 1

我们正在做的是从所选选项集的点击事件中删除点击函数 - 在本例中，是所有子项元素 parent 的 code>。因此，当用户尝试再次单击时，单击函数将不会在单击事件上调用。

在点击函数中添加以下行，因为我们希望在单击任何选项后立即触发禁用

$(this).parent().find('li').off("click");

Here is the updated codepen

请注意一件事 - .off('click') 会从元素中删除所有 click 类型的事件监听器。如果您只想删除此函数，请将函数分配给变量，然后在on中使用该变量和 off 通话。如下所示:

event_fce = function(event) {
    //do stuff here
    $(this).off('click', event_fce);
}

$('li').on('click', event_fce);