Question

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语句，但似乎没有多大意义！任何建议将不胜感激！

Answer 1

不要使用计数，只需跟踪具有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标记。

Fiddle

Answer 2

您可以按照以下方式解决问题：

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);    
});

DEMO

Update Demo

Answer 3

如果您想使用与您的方法类似的东西，您可以使用：

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);
});

简单的jquery测验 - 计数器

3 个答案: