javascript - Jquery データ属性の問題

Question

これにより、キャンバス クリックの x/y 位置がデータ属性としてキャンバス要素に保存されますが、何らかの理由で、Chrome で検査すると HTML に表示されません。

$('#canvas').click(function(e){
    $(this).data("pos-x", e.offsetX);
    $(this).data("pos-y", e.offsetY);
});

this.data の前にコンソール ログを追加すると、値が存在します。値は空ではありません。何が問題なのですか?

それは非常に簡単に思えるので、問題を見るのに苦労しています。

Answer 1

jQuery は属性から読み取りdata-ますが、data('key', value)要素の属性を変更しません。jQuery は独自の内部データ ストアを使用します。data-実際に属性を追加/変更したい場合は、次を使用しattr()ます。

$(this).attr("data-pos-x", e.offsetX);
$(this).attr("data-pos-y", e.offsetY);