是否可以使用 jQuery.attr() 函数设置多个数据属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16422675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to set multiple data attributes using the jQuery.attr() function?
提问by Garry Pettet
This works:
这有效：
$(myObj).attr("data-test-1", num1);
$(myObj).attr("data-test-2", num2);
But this doesn't:
但这不会：
$(myObj).attr({
data-test-1: num1,
data-test-2: num2
});
Am I missing something really obvious here?
我在这里错过了一些非常明显的东西吗？
回答by j08691
Sure, like this:
当然，像这样：
$(myObj).attr({"data-test-1": num1, "data-test-2": num2});
Like the .attr()docs state:
就像.attr()文档状态：
Setting several attributes at once
To change the alt attribute and add the title attribute at the same time, pass both sets of names and values into the method at once using a plain JavaScript object. Each key-value pair in the object adds or modifies an attribute:
$('#greatphoto').attr({ alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark' });When setting multiple attributes, the quotes around attribute names are optional.
一次设置多个属性
要同时更改 alt 属性并添加 title 属性，请使用普通 JavaScript 对象同时将两组名称和值传递到该方法中。对象中的每个键值对都会添加或修改一个属性：
$('#greatphoto').attr({ alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark' });设置多个属性时，属性名称周围的引号是可选的。
回答by Goran
回答by Fr0zenFyr
Sorry for posting an answer to an already solved question after so many years.
很抱歉在这么多年后发布了一个已经解决的问题的答案。
I just thought about keeping the thread up to date with recommended solution[citation needed]as on date.
我只是想通过推荐的解决方案[需要引用]保持线程的最新状态。
Since jQuery 1.2.3, there is a .data()function that takes arguments to get/set data attributes (setting multiple was available since 1.4.3) like this:
从 jQuery 开始1.2.3，有一个.data()函数可以使用参数来获取/设置数据属性（设置多个自 以来可用1.4.3），如下所示：
/*
** In all the example below, note that
** 'data-' is removed from attribute name
*/
// Setter (single)
$('#my_image').data('test-1', 'num1');
$('#my_image').data('test-2', 'num2');
// Setter (multiple)
$('#my_image').data({'test-1':'num1', 'test-2':'num2'});
// Getter (single)
$('#my_image').data('test-1'); // num1
$('#my_image').data('test-2'); // num2
It must be noted that setting data attributes with .data()doesn't update the DOM, so you can't see these in the DOM inspector. Also, they are not cross compatible with .attr(). However, the data attributes set with .attr()can be retrieved with .data()(in short, any attributes that begin with 'data-' can be retrieved with .data()).
必须注意的是，设置数据属性.data()并不会更新 DOM，因此您无法在 DOM 检查器中看到这些。此外，它们与.attr(). 但是，.attr()可以使用 检索设置的数据属性.data()（简而言之，可以使用 检索以 'data-' 开头的任何属性.data()）。
// Setter
$('#my_image').attr('data-test-3', 'num3'); // note the 'data-' on attr name
// Getter
$('#my_image').data('test-3'); // num3
