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

Question

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

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


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

上面的javascript代码抛出错误:

"未捕获的ReferenceError:赋值中的左侧无效".

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

Answer 1

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

如果需要设置实际的HTML data-*属性,则需要使用:

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

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

来自jQuery文档:

数据属性在第一次访问数据属性时被拉出,然后不再被访问或变异(然后所有数据值都在内部存储在jQuery中).

来源:jQuery缓存数据属性

Answer 2

你需要这样做

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