[解決済み] データ属性の値が更新できない

質問

Web上にいくつかの例がありますが、正しく動作していないようです。問題が解りません。

次のような簡単なHTMLがあります。

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

リンク "change data value" をクリックするたびに、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に毎回1回ずつ変化する。インクリメンタルにはできません。何が間違っているのか、何か提案があれば教えてください。

どのように解決するのですか？

以下の答えは良いものです。

を使用していないのですね。 データメソッド を正しく使用していません。データを更新するための正しいコードは

$('#foo').data('num', num); 

つまり、あなたの例では

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