javascript - jQuery.data() に格納されたオブジェクトの個々のキーを割り当てる

Question

jQuery.data()メソッドを使用して要素にカスタムデータを保存しています。

<div id="mydiv" data-test='{"1":"apple", "2":"banana"}'>Custom data</div>

data-testを使用して格納されているオブジェクトの個々のキーにアクセスできることを知っています

    $('#mydiv').data('test')["1"]

しかし、このように個々のキーを再割り当てしても問題ありませんか? 動作しますが、文書化されていません。次に、ブラウザの開発者ツールを使用して要素を調べると、この場合は古い値、つまり「apple」がまだ表示されます。JSFiddle

    $('#mydiv').data('test')["1"] = "pear"

更新 - 関連する Q&A が見つかりました (私の主な質問はオブジェクトの個々のキーの割り当てに関するものだったため、実際には重複していません)。

score 2 · Accepted Answer

を使用.data()して値を設定すると、検査中に要素の値が変更されず、そのデータが内部に保存されます。これらの変更を DOM 要素に反映させたい場合は、次の.attr()ように使用する必要があります。

  $('#mydiv').data('test')["1"] = "pear"
  $('#mydiv').attr('data-test', JSON.stringify($('#mydiv').data('test')));

デモ

その特定の要素を調べて、変更を確認します。

score 0 · Accepted Answer

これを試して

$('#mydiv').data('test')["1"] = "pear";
$('#mydiv').attr('data-test',function(_,attr){
   return JSON.stringify(attr);
});