javascript - jQuery 的 data() 函数似乎无法正常工作。

Question

以前我一直在做：

我的 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

我怎样才能解决这个问题？

发生了什么变化？

Answer 1

改变的是现在有一个重大变化： .data() 名称包含破折号

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

你可以做的是：

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 属性的信息，您可以阅读这篇文章。