jquery - 如何更新 data-* attrs？

Question

使用 jQuery 1.7.2，如何在更新数据模型时更新data-*元素中的属性？

例如：

$('el').attr('data-x', 400);
var data = $('el').data( );
data.x += 100;

更改$(el).data()似乎不会将更改推回元素的属性data-*。

我为什么要这个？我想使用带有最新数据的内置 jQuery 选择器。

Answer 1

你可以这样做：

$('el').attr('data-x', 400);

Answer 2

除非您将直接使用属性值（例如在非 jQuery 插件中），否则没有理由将数据推回元素的属性。更改只发生在客户端，因此简单地缓存从[data-*]属性中检索到的值会提高性能。

如果您绝对必须更新属性值，则应使用该.attr()方法。

此外，在检索数据时，重要的是要知道该.data()方法将尝试找出您的内容是哪种数据类型：

<div data-foo="bar" data-baz="0" data-fizz='{"a":"b"}' data-bool="true"></div>

$('div').data('foo');       //returns "bar"
$('div').attr('data-foo');  //returns "bar"

$('div').data('baz');       //returns 0
$('div').attr('data-baz');  //returns "0"

$('div').data('fizz');      //returns {"a":"b"} as an object
$('div').attr('data-fizz'); //returns "{\"a\":\"b\"}"

$('div').data('bool');      //returns true
$('div').attr('data-bool'); //returns "true"

Answer 3

要使用data-*属性，请使用attr(name,value)方法 -- 与任何其他属性值相同：

设置它：

$('#myDiv').attr('data-name', 'bob');

为拿到它，为实现它：

var name = $('#myDiv').attr('data-name');

data-* attributes和$(..).data()function之间的区别在于， attribute只能包含字符串值，而 jQuery 的data()函数允许您附加（并稍后检索）实际的 javascript 对象。

var obj = { 
  name: bob, age: 27,
  foo: function() { ... }
};
$('#myDiv').data('some.identifier', obj);

// then later
var obj2 = $('#myDiv').data('some.identifier');

console.log(obj2 === obj);  // true!