jQueryである要素にdata属性追加してそこに値を保管したり取り出して変化させたりという仕組みを作りたいと思い構築し、ボタン機能をどこぞに作ってクリックしてみると、なぜか取り出しは出来たけど変更が一度出来ただけで2度目からは1度目の値をずっと取得するという現象が起きました。
<span class="number" data-num="1">数字</span>
<button>ボタン</button>
$("button").on("click", function(){
var number = $(".number").data("num");
number = number + 1;
$(".number").data("num", number);
})
数字を取得し、加減したものをまた保管し、また取り出して・・・の繰り返しをしたかったのですが、なぜか最初の値ばかり。
jQueryのバージョンは3で、下げた方がいいのかなと思いながら調べるとこのような内容を見つけました。
jQueryがdata属性をキャッシュしている
そうなの？まじか！
通りで最初の値ばかり取得して変化しないわけですね。
data属性の値の変化に対しては、dataよりattrを使うと解決しました。この場合だと属性名すべて入れる必要になりますが、できないよりか全然まし。
おかげで解決までかなり時間かかってしまいました。
// 取り出し
var number = $(".number").attr("data-num");
// 追加
$(".number").attr("data-num", number);