jQuery attr() 方法创建数据破折号属性答案

【问题标题】：jQuery attr() method to create a data dash attributejQuery attr() 方法创建数据破折号属性
【发布时间】：2014-07-25 07:42:21
【问题描述】：

我试图弄清楚为什么在向（比方说图像）添加数据属性时需要将属性名称放在引号中。我知道这需要完成，但如果有学生问我，我不会有确切的答案为什么。因此，请看下面的两个例子。

1.) 我正在寻找为什么破折号有问题的解释。
2.) 有没有办法逃脱它，所以你不需要把它放在引号里？

这不起作用：

$("img").attr({
    alt: "a picture of my cat",
    data-item : "pet",
    data-color : "orange",
});

这行得通

$("img").attr({
    alt: "a picture of my cat",
    'data-item' : "pet",
    'data-color' : "orange",
});

3.) 传递给 attr() 方法的参数是对象字面量，对吗？
4.) 这只是对象文字语法中不允许使用破折号的规则吗？

【问题讨论】：

如果我能回答另一个问题：你能声明一个名为data-color 的变量吗？不，为什么？
- 不是破折号，而是减号运算符
解析器会将其解释为减法运算符。 stackoverflow.com/questions/5516106/…
你在“宠物”@EricB 之后没有,
没问题阿德里亚诺，就像我说的那样，我花了几分钟来欣赏评论，但这确实让我想到了我应该首先解决这个问题的方式。该属性名称的设置与设置变量的规则相同。由于这个原因，您不能使用 -dash。

【解决方案1】：

1.) 在对象字面量中，- 符号不允许作为标识符，因为它也是 javascript 中的减号运算符。

2.) 不，您必须使用引号。

3.) 是的。

4.) 是的，见 1.

【讨论】：

对于 3)，jQuery 说：“注意：属性值是字符串，除了一些属性，例如 value 和 tabindex。”
@florin.prisecariu 属性值是属性的实际值，例如alt中的"as a picture of my cat"，而不是你传递给.attr函数的东西
感谢您以这种格式回答问题！

【解决方案2】：

我同意@Ferdi265。

不过，我还要补充一点是使用jQuery.data()。

jQuery.data() 实际上并没有更新 DOM，它更新了一个引用该元素的 javascript 对象并将值存储在那里。

由于不需要 DOM 操作，因此性能要好得多。

$("img").attr({
    alt: "a picture of my cat"
}).data({
    item: "pet",
    color: "orange"
});

显然这不会更新元素的属性，因此将来对这些值的任何引用都必须使用jQuery.data()；

$("img").data("item");

如果您有兴趣了解其背后的工作原理，我不久前曾写过一篇文章：

【讨论】：

我将在我的教程中使用它作为一种方法来继续使用数据方法。
顺便说一句.. 离题.. 我喜欢你关于 jQUery 命名空间curtistimson.co.uk/jquery/namespacing-jquery-event-handlers 的教程，我在 twitte 上关注了你。很棒的网站！！！
@EricB 感谢 Eric，感谢您的反馈，我很高兴它有一些用处 :)
你认为你可以帮我解决另一个问题吗？我有一段 jQuery 需要先演示链接，然后将一段代码重构为循环？我有 JavaScript 中的示例，但无法在 jQUery 中找到它。如果可以的话，我可以给你发一封电子邮件吗？
这个数据 jQuery 存储教程很棒。我想我会花一些时间在你的网站上。大声笑

【解决方案3】：

我就是这样解决它的：

.attr({ style: "font-size : 50px;background-color : powderblue;font-family:arial" })

作为如何在元素创建语句中指定多个属性的具体示例。这是在上述示例不起作用之后。

【讨论】：