44

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

<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"/>
4

2 に答える 2

105

HTML5 では、独自のカスタム属性を作成してデータを保存できます。カスタム属性は、変数名のように好きな名前を付けることができますが、先頭に「data」という単語を追加する必要があり、単語はダッシュで区切られます。次のように、「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属性を選択することをお勧めします。
  • data-*HTML5 仕様では、属性をサード パーティのアプリケーションで使用してはならないことが明確に規定されています。これは、検索エンジンなどのプログラムが、検索結果を準備する際にカスタム データ属性に依存してはならないことを意味します。

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

デモ

于 2014-03-31T04:24:46.707 に答える