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 がすべての "kebab-case" (私のものではない jquery の言葉) データ属性を camelCases にするためです。

（必要に応じて）使用できるのは、実際のデータ属性です。

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

DOM 属性と DOM プロパティについて詳しく知りたい場合は、こちらをお読みください。