如何使用 jQuery 添加多个属性？ [复制]答案

【问题标题】：How to add multiple attributes with jQuery? [duplicate]如何使用 jQuery 添加多个属性？ [复制]
【发布时间】：2018-06-21 15:38:46
【问题描述】：

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

例如

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

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

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

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

【问题讨论】：

正如您从 Fiddle 中突出显示的语法中看到的那样，- 字符被解释为减法运算符，因此您有语法错误。您需要将属性名称用引号括起来：jsfiddle.net/bwj5uex0/4。投票结束是一个错字
您是否阅读了超出公认答案的内容？你说“所有”的答案，但它是：$(myObj).attr({"data-test-1": num1, "data-test-2": num2});
@freedomn-m 它不工作，因为num1 num2 没有在这个问题的下面被引用。
@freedomn-m 显然，如果它全部在一行中，则此解决方案有效，如果您换行，则值和属性都必须在引号中。
"值和属性必须用引号引起来" - 如果您使用的是变量，则不是，但如果它是字符串，则可以。换行符/空格没有影响（除了在此处不计算在内的极少数情况）。

标签： javascript jquery attributes attr

【解决方案1】：

只需引用名称：

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

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

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

$("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 而不是 attr。很多人有一个误解，认为data 是data-* 属性的访问器。不是； details here.

【讨论】：

【解决方案2】：

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

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

【讨论】：

不适用于自定义 data-* 属性。以上将dataaos="fade-down"放在元素上，而不是data-aos="fade-down"。