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

Question

我遵循了关于此 post jQuery: Adding two attributes via the .attr(); method 的所有答案，其中 none 对多个属性有效，只有单个属性有效。

例如

$("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 之后）使用 [] 符号计算名称。

Live Example（右键单击图像并选择检查/检查元素以查看属性）：

$("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>

人们可能会建议您使用 data for this instead of attr. Many people have a misunderstanding, thinking data is an accessor for data-* attributes. It isn't; details here。

Answer 2

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

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

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

How to add multiple attributes with jQuery?

javascript

jquery

attributes

attr