时间戳

首页 > 解决方案 > 如何使用 jQuery 添加多个属性？

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

问题描述

我遵循了这篇文章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 上进行测试。

标签： javascriptjqueryattributesattr

解决方案

只需引用名称：

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

这是 JavaScript 对象初始化器的标准特性，适用于 jQuery 的attr. 属性名称可以是文字（foo:）、字符串文字（"foo":或'foo':）、数字文字（1:）（它们被转换为字符串），或者（在 ES2015 之后）使用[]符号计算的名称。

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

$("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-*属性的访问器。不是；详情在这里。

推荐阅读