简单的jquery测验-计数器

simple jquery quiz - counter

本文关键字：计数器 测验 jquery 简单      更新时间：2023-09-26
var score = 0;
$('ul li').on('click', function () {
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
    var isCorrect = $(this).data('correct');
    if (isCorrect === 'yes') {
        score++;
    }
    console.log(score);
});

这里有一个小提琴- http://jsfiddle.net/warrenkeith/2DGj2/1/

我正在尝试从上面构建一个基本的客户端测试。我目前的问题是，我不知道如何防止多次点击导致我的分数增加。如果有人在点击正确的答案后选择了错误的答案，那么我也需要扣除计数。

我已经尝试了一些if语句在那里，但似乎没有做出太多的基础!任何建议将非常感激!

不使用count，只需跟踪具有data-correct=yes的选定答案

$('ul li').on('click', function () {
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
    console.log($('ul .selected[data-correct="yes"]').length);
});

以上代码搜索类为selected，数据属性为correct=yes的li标签。

小提琴

您可以按以下方式关闭issue:

var score = 0;
$('ul li').on('click', function () {
    if($(this).siblings().hasClass('selected')==false){
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
    var isCorrect = $(this).data('correct');
    if (isCorrect === 'yes') {
        score++;
    }
}
 console.log(score);    
});

更新代码
var score = 0;
$('ul li').on('click', function () {
    if($(this).siblings().hasClass('selected')==false && $(this).hasClass('selected')==false){
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
    var isCorrect = $(this).data('correct');
    if (isCorrect === 'yes') {
        score++;
    }
}
 console.log(score);    
});

演示更新演示

如果您想使用类似于您的方法，您可以使用:

var score = 0;
$('ul li').on('click', function () {
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
    var isCorrect = $(this).data('correct');
    if (isCorrect === 'yes') {
        score++;
    } else {
        score--;
    }
    $(this).siblings().unbind();
    console.log(score);
});
相关文章：