动态更改后获取数据属性

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 属性 key/value 对存储在一个对象中，与 DOM 分开。 data() 方法从此对象读取。

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

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

Answer 2

$(.row).data('id', 'your new value')

使用上述 setter 方法更新您的 data-id 值

当你得到 $('.row').data('id') 之后你就会得到你的更新值

Answer 3

对于 Set 和 Get 属性使用 data() 而不是 attr()

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

//set attr
$(.row).data("id","NEW_VAL");

//get attr
$(.row).data("id");

Getting a data attribute after dynamic change