web-dev-qa-db-ja.com

jqueryは、ハイフンと大文字と小文字を区別するHTML 5データ属性を取得します

Jquery .data() を使用してデータ属性を取得する方法その場合、html5 data-*属性は小文字とキャメルケースに変換されますか？カスタム属性を使用してデータを保存する際に従うべき主なルールは何ですか？

<input type="button" class="myButton" value="click me" data-productId="abc"/>
<input type="button" class="myButton" value="click me" data-product-id="abc"/>
<input type="button" class="myButton" value="click me" data-PRODUCT-ID="abc"/>
<input type="button" class="myButton" value="click me" data-ProDUctId="abc"/>
jqueryhtmlhtml5custom-data-attributejquery-data
35
Unknown

HTML5では、独自のカスタム属性を作成してデータを保存できます。カスタム属性は、変数名など、好きな名前にできますが、Wordの「データ」を先頭に追加する必要があり、単語はダッシュで区切られます。 「foo」、「bar」、「foo bar」データ属性を次のように入力に追加できます。

_<input type="button" class="myButton" value="click me" data-foo="bar" 
data-bar="baz" data-foo-bar="true">
_

jQueryの .data() メソッドを使用すると、_data-*_属性にアクセスできます。

バージョン1.4までのjQueryを使用すると、データ属性は大文字と小文字を区別しませんでした。したがって、

_<input type="button" class="myButton" value="click me" data-productId="abc"/>
_

でアクセス可能になります

_$('.myButton').data('productId');
_

jQuery 1.5および1.6

ただし、jQuery 1.5および1.6の変更は、データ属性が小文字に強制されるようになったことを意味します。

_<input type="button" class="myButton" value="click me" data-productId="abc"/>
_

でのみアクセス可能

_$('.myButton').data('productid');
_

_data-*_属性は、要素のデータセットオブジェクトのプロパティになります。新しいプロパティ名は次のように導出されます。

  • 属性名はすべて小文字に変換されます。
  • _data-_プレフィックスは、属性名から取り除かれます。
  • ハイフン文字も属性名から削除されます。
  • 残りの文字はキャメルケースに変換されます。手順3で削除されたハイフンの直後の文字は大文字になります。

元の属性名_data-product-id_は、データセットオブジェクトでproductIdに変換されていることに注意してください。 _data-*_属性に名前を付けるときは、名前変換プロセスを考慮する必要があります。属性名は小文字に変換されるため、大文字の使用は避けてください。次の例は、いくつかの属性名がデータセットプロパティにどのように変換されるかを示しています。

_"data-productId"  translates to "productid"
"data-product-id" translates to "productId"
"data-PRODUCT-ID" translates to "productId"
"data-ProDUctId"  translates to "productid"
_

注：

  • 通常、カスタムデータ属性は、JavaScriptコードを支援/簡素化するメタデータを格納するために使用されます。
  • 要素には、任意の数のカスタムデータ属性を含めることができます。
  • カスタムデータ属性は、より適切な要素または属性が存在しない場合にのみ使用してください。たとえば、画像にカスタムの「テキスト説明」属性を作成しないでください。既存のalt属性の方が適しています。
  • HTML5仕様では、_data-*_属性をサードパーティのアプリケーションで使用すべきではないことが明確に規定されています。これは、検索エンジンなどのプログラムが検索結果を準備する際にカスタムデータ属性に依存しないことを意味します。

HTML5でカスタム属性を実装すること自体は技術的に複雑ではありませんが、実際の難しさは、独自のプロジェクトでそれらを使用するのが適切かどうかを選択することです。最後に、ページが依存する機能に対してデータセットアプローチの使用を開始するのはまだ少し早いことを忘れないでください。サポートされていないブラウザには代替手段を必ず提供してください。

[〜＃〜] demo [〜＃〜]

92
Unknown