单击后停用部分页面

Deactivate part of page on click

本文关键字：分页 用部 单击      更新时间：2023-09-26

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

我在这里和这里找到了一些类似的主题，但我不想添加覆盖，而且我的代码中没有使用输入，所以我想知道是否有其他途径。

我在这里创建了一个代码笔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

有什么想法吗？

感谢

我们要做的是从所选选项集的click event中删除click function——在本例中，是元素parent的所有children。因此，当用户再次尝试click时，click function将不会在click event上被调用。

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

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

这是最新的代码笔

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

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

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

Codepen更新

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