javascript - 是否可以使用 jQuery.attr() 函数设置多个数据属性？

Question

这有效：

$(myObj).attr("data-test-1", num1);
$(myObj).attr("data-test-2", num2);

但这不会：

$(myObj).attr({
  data-test-1: num1,
  data-test-2: num2
});

我在这里错过了一些非常明显的东西吗？

Answer 1

当然，像这样：

$(myObj).attr({"data-test-1": num1, "data-test-2": num2});

就像.attr()文档状态：

一次设置多个属性

要同时更改 alt 属性并添加 title 属性，请使用纯 JavaScript 对象一次将两组名称和值传递给方法。对象中的每个键值对添加或修改一个属性：

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

设置多个属性时，属性名称周围的引号是可选的。

Answer 2

是的，可以设置多个属性，只需使用简单的 Object 文字语法。例子：

$('#my_image').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

有关 attr 方法的更多信息可以在这里找到。

Answer 3

很抱歉在这么多年后发布一个已经解决的问题的答案。

我只是想用推荐的解决方案^{[需要引用]}使线程保持最新状态。

从 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

必须注意，设置数据属性.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