动态更改后获取数据属性

Question

我有一个简单的设置，其元素'data-id'附加到元素：

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

如果我致电alert($(.row).data(id));，我会得到我的身份证明1。 接下来我手动或通过另一个脚本更改此ID，例如2：

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

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

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

这种行为的原因是什么？

Answer 1

原因是因为jQuery将所有MouseEvent event, String type属性键/值对存储在一个对象中，与DOM分开。 data方法从此对象读取。

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

因此，最好将data()用作setter和getter。

Answer 2

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

使用上述设置方法来更新您的data-id值

获得$('.row').data('id')之后，您就会获得更新的值

Answer 3

对于“设置和获取”属性，请使用data()而不是attr()

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

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

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