无法更新数据属性值

虽然网上有一些这样的例子，但它似乎不能正常工作。我无法弄清楚问题所在。

我有这个简单的 HTML

<div id="foo" data-num="0"></ div>
<a href="#" id="changeData">change data value</a>

每次我单击“更改数据值”链接时，我想更新 data-num 的数据值。 例如，我需要它是1,2,3,4,...（每次点击链接时加1）

我拥有的是

var num = $('#foo').data("num");
console.log(num);
num = num+1;               
console.log(num);
$('#foo').attr('data-num', num);   

该值每次从 0 变化一次到 1。我无法让它增量。关于我做错了什么有什么建议吗？

用它来代替，如果您想更改节点元素的属性 data-num，而不是数据对象的属性:

DEMO

$('#changeData').click(function (e) { 
    e.preventDefault();
    var num = +$('#foo').attr("data-num");
    console.log(num);
    num = num + 1;
    console.log(num);
    $('#foo').attr('data-num', num);
});

PS：但你几乎在所有情况下都应该使用 data() 对象，但不是所有情况......