有一个像这样的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'
为什么会这样呢？
最佳答案
当您使用 jQuery 存储数据时 .data()它内部存储数据并且不更新HTML5 data- attribute 。
它的作用是，当您第一次调用 .data() 方法时，它会从 data- 属性初始化内部缓存中的值。
您可能会对 .data() 方法的 getter 版本的工作原理感到困惑。当您调用 $elem.data('someAttr') 时:
- 在 $.cache 中查找驼峰式大小写键(例如 someAttr)。如果找到，则返回该值。
- Changes将驼峰式大小写键输入破折号分隔的版本(例如 some-attr)并再次尝试。如果找到，则返回该值。如前所述，该值可能源自 HTML5 data- 属性。
示例:
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 - 为什么 jQuery.data() 方法不更新我的数据属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27657433/