读取数据-属性作为变量

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 />

查询：

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