javascript - 动态更改后获取数据属性

Question

我有一个简单的设置，在元素上附加了一个属性“data-id”:

<div class='row' data-id='1'>

如果我调用 alert($(.row).data(id)); 我会得到我的 id 1。接下来，我手动或通过另一个脚本将此 ID 更改为 2:

<div class='row' data-id='2'>

现在如果我调用 alert($(.row).data(id)); 我仍然会得到 1 而不是 2。

但是，如果我将方法 .data() 更改为 attr('data-id')，结果将是 2。

这种行为的原因是什么？

Answer 1

原因是因为 jQuery 将所有 data 属性键/值对存储在一个对象中，与 DOM 分开。 data() 方法从这个对象中读取数据。

当您使用 attr() 更新 data 属性时，您仅更新了 DOM，因此 data() 方法从内存对象中读取旧值。

因此，最好始终使用 data() 作为 setter 和 getter。