jquery 数据与 dom 属性不匹配答案

【问题标题】：jquery data do not match dom attributejquery 数据与 dom 属性不匹配
【发布时间】：2013-06-17 13:43:12
【问题描述】：

我对 jquery 数据函数有一个奇怪的问题。这是fiddle

如您所见，我更新了 active 数据，但我看不到 dom data-active 属性值更改，尽管我重新查询活动数据，但它写入了更改的值。当我检查它时，$.data() 不会更新 dom 上的属性。

【问题讨论】：

.data() 和属性不是一回事。 jQuery 恰好使.data() 可以使用所有data-* 属性。如果您操纵.data()，它不会更改属性。如果您操作该属性，它确实会更改.data()。另外，请注意，您可以使用 $("li").eq(1) 而不是 $($('li')[1]) - 您不必将其重新包装在 jQuery 对象中
我总是只使用.attr('data-'+data,value) 和.attr('data-'+data)。
stackoverflow.com/a/7262427/1414562
感谢 eq 技巧 :)

【解决方案1】：

jQuery data api 不依赖于元素属性，尽管它使用data-<key> 来获取可用的初始值。

jQuery 使用内部 javascript 对象来维护对象的数据值

如果您想更新attribute，则必须使用.attr('data-<key>', '<value>')

【讨论】：

感谢您的解释。但是，那么使用.data 函数有什么意义呢？我可以查询但不能更新，这种不一致会给 jq 没有经验的用户带来奇怪的行为。我宁愿对查询和更新都使用相同的功能。有没有合理的解释？
@px5x2 你可以更新和查询数据:) 唯一的问题是属性值不会被更新，更新后的值被 jQuery 存储为键值结构

【解决方案2】：

您需要使用attr，因为.data 不会更新实际的DOM 节点属性-

$($('li')[1]).attr('data-active', true);

【讨论】：