使用jQuery动态设置数据属性的值

Question

我在客户端事件中广泛使用数据属性来管理数据。是否可以使用JavaScript或jQuery动态地将值分配给数据属性？

<li data-class_value="somevalue" class="myclass"></li>


$('.myclass').click(function(){
   $(this).data('class_value') = "new value";
});

上述 JavaScript 代码会抛出错误：

"Uncaught ReferenceError: Invalid left-hand side in assignment"。

请问有谁能告诉我怎样可以实现这个功能吗？

- Abishek

Answer 1

我相信上面的答案只会在jQuery中将数据对象设置在那个元素上。

如果你需要设置实际的HTML data-*属性，你需要使用这个：

```html

This is an example.

```

$(this).attr("data-class_value", "new value");

当使用 $(this).data("class_value"); 这种方式检索HTML5 data-*属性时要小心，因为尽管您可以使用这个快捷方式来检索它们，但随后的检索将使用jQuery数据对象中的缓存值。

来自jQuery文档：

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

来源：jQuery数据属性的缓存

- jjeaton

---

缓存数据属性花费了几个小时，谢谢！ - Alexander Kim

你如何解决缓存问题？我尝试了 $(this).removeAttr("data-class_value", "new value"); 但是当然它不起作用。有什么线索吗？ - kevllar

@kevllar removeAttr 只接受一个参数，因此它不会为您设置新值。您需要使用 attr 来代替。 - jjeaton

@jjeaton 我正在尝试设置属性然后删除它... 但是由于被缓存了，所以它不起作用... 我尝试了 attr 但没有成功。 - kevllar

如果您想从缓存中删除数据并在DOM中删除属性，则应使用以下代码：$(this).removeData("class_value").removeAttr("data-class_value") - jjeaton

@jjeaton 看起来我没有正确地定位DOM元素。我使用了attr然后是removeAttr，最终似乎可以工作了。不需要使用removeData。谢谢！ - kevllar

Answer 2

你需要做的是

 $(this).data('class_value', "new value");

- Dogbert

Answer 3

$(this).data('class_value','new value') ;

.data

- Rafay