jquery - 使用 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

using.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-*，然后使用该存储来获取或设置任何后续调用的值。

这与 using 不一致，.attr('data-*')因为它确实适用于元素上定义的实际属性，因此您希望使用其中一个。

Answer 4

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

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