Question

我关注了这篇帖子jQuery: Adding two attributes via the .attr(); method上的所有答案，但所有答案都不适用于多个属性，只有单个属性可以解决。

例如

node_modules

不起作用。但是单个属性确实起作用：

$("img").attr({
data-aos: "fade-down",
data-aos-duration: "600"
});

https://jsfiddle.net/bwj5uex0/3/ 在CTRL + Enter之后，您可以使用浏览器的内置开发工具在JSFiddle上进行测试。

Answer 1

只需引用名称：

In [266]: '%s %s'%('one','two')
Out[266]: 'one two'

这是JavaScript对象初始化器的标准功能，可与jQuery的In [267]: '%s %s'%(('one two',)*2) Out[267]: 'one two one two'一起使用。属性名称可以是文字（$("img").attr({ "data-aos": "fade-down", "data-aos-duration": "600" });），字符串文字（attr或foo: :)，数字文字（"foo":）（它们将转换为字符串）或（在ES2015及更高版本中）使用'foo'表示法计算名称。

实时示例（右键单击图像，然后选择“检查/检查元素”以查看属性）：

1:

[]

您可能会发现有人建议您为此使用data而不是attr。许多人误会以为$("img").attr({ "data-aos": "fade-down", "data-aos-duration": "600" });是<img src="http://via.placeholder.com/200/44F/DDD?text=hi+there"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>属性的访问者。不是details here。

Answer 2

或者，您可以使用camelCase样式进行键声明

$("img").attr({
    dataAos:"fade-down",
    dataAosDuration:"600"
})

如何使用jQuery添加多个属性？

2 个答案: