Question

有这样的HTML：

<div id="mydiv" data-hoo-foo="bar"></div>

我正在尝试以下方法：

var $mydiv = $('#mydiv');
$mydiv.data('hoo-foo');      // returns 'bar'
$mydiv.data('hoo-foo', 'asdf');
$mydiv.data('hoo-foo');      // returns 'asdf'
$mydiv.attr('data-hoo-foo'); // returns 'bar'

为什么会这样？

Answer 1

当您使用jQuery .data()方法存储数据时，它会存储内部数据，不会更新HTML5 data- attribute。

它的作用是，当您第一次调用.data（）方法时，从data-属性初始化内部缓存中的值。

您可能会因为.data（）方法的getter版本如何工作而感到困惑。当你调用$ elem.data（'someAttr'）时：

在$ .cache中查找驼峰大小写密钥（例如someAttr）。如果找到，则返回值。
Changes驼峰案例密钥进入破折号分隔版本（例如some-attr）并再次尝试。如果找到，则返回值。如上所述，此值可能源自HTML5数据属性。

示例：

var $mydiv = $('#mydiv');
$mydiv.data('hoo-foo');        // 'bar' - initialized from the data attribute
$mydiv.data('hooFoo');         // 'bar' - initialized from the data attribute
$mydiv.attr('data-hoo-foo');   // 'bar' - directly from the data attribute

$mydiv.data('hoo-foo', 'asdf');
$mydiv.data('hooFoo');         // 'asdf' - from the stored data by 'hoo-foo' key
$mydiv.data('hoo-foo');        // 'asdf' - from the stored data by 'hoo-foo' key
$mydiv.attr('data-hoo-foo');   // 'bar' - the data attribute remains unchanged

$mydiv.data('hooFoo', 'blah');
$mydiv.data('hooFoo');         // 'blah' - key 'hooFoo' exists
$mydiv.data('hoo-foo');        // 'asdf' - key 'hoo-foo' exists
$mydiv.attr('data-hoo-foo');   // 'bar' - still unchanged

$mydiv.data('hoo-foo', 'ugh'); // this will override the 'hooFoo' key too
$mydiv.data('hooFoo');         // 'ugh'
$mydiv.data('hoo-foo');        // 'ugh'
$mydiv.attr('data-hoo-foo');   // 'bar' - still unchanged

$mydiv.removeData('hoo-foo');  // removes both 'hooFoo' and 'hoo-foo' keys
$mydiv.data('hooFoo');         // 'bar' - key 'hooFoo' adn 'hoo-foo' undefined
                               // initializing as 'hoo-foo' from data- attribute
$mydiv.data('hoo-foo');        // 'bar' - key 'hoo-foo' exists
$mydiv.attr('data-hoo-foo');   // 'bar' - still unchanged

我有点难以理解这一点，并没有找到完整答案的运气。这就是我在这里发布的原因。如果有任何不准确的地方，请纠正我。我试图从the code中找出确切的行为，但这是一个很好的代号，所以尝试了它而不是凭经验;）

有关此问题的其他一些问题的参考：

为什么jQuery.data（）方法不更新我的数据属性？

1 个答案: