jquery - jquery设置数据属性

Question

html

<div id="you" data-you="Hello mean">super</div>

是#you html元素改变数据-you属性

console.log($("#you").data("you")); // Hello mean

$("#you").attr("data-you", "yes change you atribute");

console.log($("#you").data("you")); // Hello mean | does not change.

当我改变时，属性“data-you”不会改变。我怎样才能做到这一点？

谢谢你。

Answer 1

已经有一个答案被选为正确答案，但似乎没有一个答案能清楚简洁地解释正在发生的事情。
所以让我试一试：

$(element).data(key, value) 不会更改元素的 html5 'data-*' 属性，jQuery 在内部存储键值（在 jQuery.cache 中）。
因此，当您调用时，$(element).data(key)您会得到 jQuery 内部存储的内容。

在这里回答你的问题：

由于您要更改data-youhtml 标签的属性，因此您需要使用该attr()方法

因此：

console.log($("#you").attr("data-you")); // Hello mean

$("#you").attr("data-you", "yes change you atribute");

console.log($("#you").attr("data-you")); // The data-you attribute has been changed.

Answer 2

attr() 并且您不必更改 data() 方法。

试试下面的方法：

console.log($("#you").data("you")); // Hello mean

$("#you").data("you", "yes change you atribute"); // yes change you atribute

console.log($("#you").data("you")); //  yes change you atribute

数据示例 http://api.jquery.com/data/ ​​​​​​</p>

Answer 3

按照你同样的逻辑，看看结果；更改data为attr

console.log($("#you").attr("data-you"));

参考现场演示

Answer 4

试试这个：

$("#you").data("you", "yes change you atribute");

Answer 5

更多信息 ==>如何从 HTML 元素 jQuery 中获取和设置数据属性值 - Tutsmake

使用以下语法，您可以设置属性和值。

$(selector).attr(attribute,value);  

通过示例设置数据属性值

$('#myClass').attr("data-id",50); 

Answer 6

$("#you").attr("data-you","New Value");