☰

jquery でハイフンと大文字小文字の区別のある HTML 5 データ属性を取得する 質問する

tag-icon • tag-icon jquery html custom-data-attribute jquery-data
jquery でハイフンと大文字小文字の区別のある HTML 5 データ属性を取得する 質問する

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

ベストアンサー1

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-*。

jQuery バージョン 1.4 まででは、データ属性は大文字と小文字を区別しませんでした。そのため、次のようになります。

<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-属性名からプレフィックスが削除されます。
  • 属性名からハイフン文字も削除されます。
  • 残りの文字は CamelCase に変換されます。手順 3 で削除されたハイフンの直後の文字は大文字になります。

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

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

デモ

おすすめ記事