Question

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

例如：

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

更改$(el).data()似乎并未将更改推回到元素'data-* attrs。

为什么我要这个？我想使用内置的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-* 属性和$(..).data()函数之间的区别在于属性只能包含字符串值，而jQuery的{{ 1}}函数允许您附加（以及稍后检索）实际的javascript对象。

data()

如何更新数据 - * attrs？

3 个答案: