Question

我有这些带有数据属性的HTML选择框。现在，当有人点击其中一个框时，我希望Jquery读出数据属性并将其用作变量。在池中添加1或减1。但是我收到了NaN错误。解决这个问题的任何想法？提前谢谢！

HTML：

<label><input type="checkbox" class="selectable one" data="one" />Antwoord 1</label><br />
<label><input type="checkbox" class="selectable two" data="two" />Antwoord 2</label><br />

JQUERY：

one = 0;
two = 0;

$('.selectable').on('click', function(){
    // tell me what pool you are
var thispool = $(this).attr("data");
    // you are now activated
$(this).toggleClass('activated');
    //add +1 if activated, else -1
if ($(this).hasClass('activated')){thispool++;}
else {thispool--;}
});

Answer 1

您需要将数字值分配给data 1而不是one，并且两者必须为2才能应用递增或递减运算符。

<label><input type="checkbox" class="selectable one" data="1" />Antwoord 1</label><br />
<label><input type="checkbox" class="selectable two" data="1" />Antwoord 2</label><br />

Answer 2

您可以使用其他变量来引用变量，而不是使用下面给出的对象

var counter = {
    one: 0,
    two: 0
}

$('.selectable').on('click', function () {
    // tell me what pool you are
    var thispool = $(this).attr("data");
    // you are now activated
    $(this).toggleClass('activated');
    //add +1 if activated, else -1
    if ($(this).hasClass('activated')) {
        counter[thispool]++;
    } else {
        counter[thispool]--;
    }
});

演示：Fiddle

读取数据 - 属性作为变量

2 个答案: