使用jQuery添加更多数据属性

Question

我正在尝试使用jQuery添加HTML5 data- *值，似乎没有发生任何事情，我做错了什么？

这是我的HTML：

<a href="#" data-js="click-chat"></a>

jQuery的：

$('[data-js=click-chat]').click(function(){
    $(this).data("role",'test')
})

由于某种原因，它没有设置任何数据或更新现有值。

Answer 1

使用.data()不创建属性，只是将数据添加到元素。您应该可以使用.data('role')来使用它，但是您不会在html中看到属性。

因此，如果您在选择器上调用.data()，它将检查data-属性以及检查属性形式中不存在的数据。

Answer 2

如果要向元素添加属性，可以使用.attr()方法。 否则所有其他答案都与data()的工作方式一致。

 $('a[data-js="click-chat"').attr('data-monkey', "lemur");

Answer 3

当您使用.data()函数时，jQuery不会将值存储为元素的实际属性，因此您不会看到对DOM的任何更改。第一次调用.data()时，它会在内部存储元素的任何data-*属性的当前值，然后使用该存储来获取或设置任何后续调用的值。

这与使用.attr('data-*')不一致，因为 使用元素上定义的实际属性，所以你想要使用其中一个。

Answer 4

您可以像这样使用.attr属性

$(this).attr('id', 'your-id-value');