jQuery data() 函数似乎无法正常工作。答案

【问题标题】：jQuery's data() function does not seem to be working right.jQuery data() 函数似乎无法正常工作。
【发布时间】：2016-06-14 22:37:09
【问题描述】：

以前我一直在做：

我的 HTML：

<span id="foo" data-foo-bar="42">The Answer</span>

我的“jquery”：

const fooElement = $('#foo');
const fooBar = fooElement.data('foo-bar'); // 42
// or
const fBar = fooElement.data()['foo-bar']; // 42

但是在我升级 jquery（到 3.0）之后，我得到了这个：

const fooElement = $('#foo');
const fooBar = fooElement.data('foo-bar'); // undefined
// or
const fBar = fooElement.data()['foo-bar']; // undefined

我该如何解决这个问题？

发生了什么变化？

【问题讨论】：

检查这里，plnkr.co/edit/0g9ITDAouWBL7XYRZzAO?p=preview 似乎在 jquery 3.0 上运行良好
@Deep 这很奇怪，因为该对象仅包含 fooBar: 42 plnkr.co/edit/eTxAPEXjUNi0b7RxUov7?p=preview 。那一定是你的浏览器正在做的事情。

【解决方案1】：

改变的是现在有一个breaking change: .data() names containing dashes

这意味着你尝试过的将不再有效！

你可以这样做：

const fooElement = $('#foo');
const fooBar = fooElement.data('fooBar'); // 42
// or
const fBar = fooElement.data()['fooBar']; // 42

这是因为 jquery 现在 camelCases 所有“kebab-case”（jquery 的词不是我的）数据属性。

你可以使用（如果你愿意的话），是实际的数据属性：

const fooElement = document.getElementById('foo');
const fooBar = fooElement.getAttribute('data-foo-bar');  // 42

如果您想了解更多关于 DOM 属性与 DOM 属性的信息，可以阅读this。

【讨论】：