Question

当我使用jQuery.data函数编辑DOM元素时，DOM代码并未真正更新：

Ex，for：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <div id="foo" data-price="100">Foo</div>
</body>
</html>

和

console.log($('#foo').data('price'));
$('#foo').data('price', 90);
console.log($('#foo').data('price'));
console.log('[data-price=90]: ' + $('[data-price=90]').length);
console.log('[data-price=100]: ' + $('[data-price=100]').length);

输出是：

100
90
"[data-price=90]: 0"
"[data-price=100]: 1"

（此例子可用here）

因此，在使用jQuery.data后，div#foo的价格仍为90。如何用jQuery方法真正修改它？

Answer 1

一种解决方案是将属性修改为：

console.log($('#foo').data('price'));
$('#foo').attr('data-price', 90);
$('#foo').data('price', 90);
console.log($('#foo').data('price'));
console.log('[data-price=90]: ' + $('[data-price=90]').length);
console.log('[data-price=100]: ' + $('[data-price=100]').length);

将输出：

100
90
"[data-price=90]: 1"
"[data-price=100]: 0"

Answer 2

@bux就点了，因为你可以从here看到：

请注意，.removeData()只会从jQuery的内部删除数据 .data()缓存以及元素上的任何相应data-属性不会被删除。因此，稍后对data（）的调用将重新检索 data-属性的值。为防止这种情况，请使用.removeAttr() 与.removeData()一起删除数据属性。先对于jQuery 1.4.3，因为data()没有使用data-属性，所以不是一个问题。

因此，缓存数据可以使用.data()进行操作，并且具有相应的data-属性。

当您通过.data('price', 90)更改缓存数据时，属性data-price="100"仍然完好无损且无法更改。

如何使用jQuery.data

2 个答案: