使用 jquery 为数据属性动态设置值

Posted 2023-05-08

【中文标题】使用 jquery 为数据属性动态设置值

【英文标题】：Setting a value dynamically for data attributes using jquery

【发布时间】：2011-11-02 01:21:41

【问题描述】：

我广泛使用数据属性来管理客户端事件中的数据。是否可以使用 javascript 或 jquery 为数据属性动态分配值？

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


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

上面的javascript代码抛出错误：

“未捕获的 ReferenceError：分配中的左侧无效”。

有人可以告诉我这是如何实现的吗？

【参考方案1】：

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

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

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

请注意以这种方式检索 HTML5 data-* 属性，虽然您可以使用快捷方式 $(this).data("class_value"); 检索它们，但后续检索将使用 jQuery 数据对象中的缓存值。

来自jQuery docs：

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

来源：jQuery caching of data attributes

【讨论】：

数据属性的缓存需要几个小时，谢谢！

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

@kevllar removeAttr 只接受一个参数。因此它不会为您设置新值。您需要改用attr。

@jjeaton 我正在尝试设置属性然后将其删除...但它不起作用，因为它被缓存了...我尝试了attr 但没有乐趣

@kevllar 如果你想从缓存中删除数据并删除 DOM 中的属性，你会想要这个：$(this).removeData("class_value").removeAttr("data-class_value")

【参考方案2】：

你需要做的

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

【参考方案3】：

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

.data