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

Question

我遵循了这篇文章中的所有答案jQuery：通过 .attr() 添加两个属性；方法，它们都不适用于多个属性，只能用于单个属性。

例如

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

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

$("img").attr("data-aos", "fade-down");

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

Answer 1

只引用名称：

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

这是 JavaScript 对象初始值设定项的标准功能，可与 jQuery 的attr. 属性名称可以是文字 ( foo:)、字符串文字 ("foo":或'foo':) 、数字文字 ( 1:) （它们被转换为字符串），或（在 ES2015 以后）使用[]符号计算的名称。

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

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

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

你可能会得到人们建议你使用datathis 而不是attr. 很多人有一个误区，思维data是data-*属性的加成器。它不是；详情请看这里。