分配存储在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＆amp; A（不是真的重复，因为我的主要问题是关于分配对象的各个键）

• Unable to set data attribute using jQuery Data() API
• Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes?
• Can't update data-attribute value：答案评论中的良好讨论

Answer 1

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

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

DEMO

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

Answer 2

试试这个

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