Javascript jQuery'；元素数据更改时，s data（）属性不更新

我想使用jQuery的

data（）

api来检索元素的所有数据属性。但是这个api的缓存特性真的很烦人。有时我需要在javascript中更改元素的某些数据属性，但是

data（）

api总是返回每个数据属性的初始值。因此，我必须使用

attr（）

访问元素的每个数据属性，以获取其最新值。有没有办法克服这种缓存问题，使

data（）

每次调用时总是返回最新的值？

简短的回答是：不要使用jQuery.data（）动态设置数据属性，除非您可以保证数据属性总是由jQuery设置

以下任一解决方案均有效：

• 改用vanilla JS

  .getAttribute（）

• 改用jQuery

  .attr（）

以下是（我不认为这会让jQuery用户大吃一惊）：

数据属性在第一次访问数据属性时被拉入，然后不再被访问或修改（所有数据值都存储在jQuery内部）

关于为什么不使用jQuery设置属性：许多客户端模板语言构建DOM，包括数据属性

给定动态构建的HTML（如DevTools中所示：

<form data-test="300" ...

JQuery返回一个过期的前一个值（在本例中为19000）：

jQuery

attr

返回当前值：

 $('form').attr('data-amount');

 document.querySelector('form').getAttribute('data-amount');

Vanilla JS

getAttribute（）

返回当前值：

 $('form').attr('data-amount');

 document.querySelector('form').getAttribute('data-amount');

还可以在更新数据属性后使用jQuery的方法重置其缓存

例如：

> document.querySelector('.sub-panels')
<div class=​"sub-panels">​…​</div>​

> document.querySelector('.sub-panels').setAttribute('data-test', 300);
undefined

> document.querySelector('.sub-panels')
<div class=​"sub-panels" data-test="300">​…​</div>​

> $('.sub-panels').data('test')
300

> document.querySelector('.sub-panels').setAttribute('data-test', 400);
undefined

> $('.sub-panels').data('test')
300

> $('.sub-panels').removeData();
[div.sub-panels, prevObject: jQuery.fn.init(1), context: document, selector: ".sub-panels"]

> $('.sub-panels').data('test')
400

>document.querySelector（“.sub-panels”）
​…​​
>document.querySelector（“.subpanels”）.setAttribute（'data-test'，300）；
未定义
>document.querySelector（“.sub panels”）
​…​​
>$（'子面板'）.data（'测试'）
300
>document.querySelector（“.subpanels”）.setAttribute（'data-test'，400）；
未定义
>$（'子面板'）.data（'测试'）
300
>$（'.sub panels'）.removeData（）；
[div.sub-panels，prevObject:jQuery.fn.init（1），上下文：文档，选择器：“.sub-panels”]
>$（'子面板'）.data（'测试'）
400

这不是缓存，

data（）

在内部存储数据，并且不更改数据属性，如果出于某种原因必须更改属性，则应使用

attr（）

，但如果一致地使用

data（）

来设置和获取数据，则不应成为问题，因为您将获得正确的数据。“有时我需要在javascript中更改某个元素的某些数据类型”-为什么？如果在页面加载后需要针对该元素存储数据，可以使用

.data（'key'，'value'））

。这不会将数据存储为属性，但那又怎样？@nnnnnn每个客户端模板语言都会构建DOM，其中可能包含数据属性，而jQuery很可能不会这样做。回答很好，先生。谢谢！回答绝对正确。我为这个问题花了几个小时。