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

我们正在做的是从所选选项集的click function中删除click event - 在这种情况下，所有children元素parent }。因此，当用户再次尝试click时，click function将不会调用click event。

在click function中添加以下行，因为我们希望在点击任何选项时立即触发禁用

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

Here is the updated codepen

请注意一件事 - .off('click')从元素中删除所有类型为click的事件侦听器。如果您只想删除此功能，请将function分配给variable，然后使用variable和on来电中的off。如下所示：

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

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

Answer 2

一旦选择了一个选项（正确/错误），您就可以关闭click，如下所示：

Codepen updated

$(this).siblings().off("click"); //add this to where appropriate, such as either in `if` or `else` or both.

点击即可停用部分页面

2 个答案: