javascript - 分配存储在 jQuery.data() 中的对象的各个键

Question

我使用jQuery.data()方法将自定义数据存储在元素上。

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

我知道我可以访问存储在data-testusing中的对象的各个键

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

但是可以像这样重新分配 单个键吗？它有效，但没有记录。其次，在使用浏览器的开发工具检查元素时，在这种情况下我仍然看到旧值，即“apple”。JSFiddle

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

更新 - 找到更多相关的问答（不是真的重复，因为我的主要问题是关于分配对象的单个键）

• 无法使用 jQuery Data() API 设置数据属性
• 为什么不更改 jQuery $.fn.data() 更新相应的 html 5 data-* 属性？
• 无法更新数据属性值：答案评论中的良好讨论

Answer 1

用于.data()设置值，在您检查元素时不会更改元素中的值，它会在内部存储该数据。如果您想将这些更改反映到 DOM 元素，那么您应该.attr()像这样使用，

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

演示

检查该特定元素以验证更改。

Answer 2

试试这个

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