JSカスタムdata-*属性とjqueryのdata()が値を取らない問題
990 ワード
以下は私がコピーしたこのHTML 5タグの使い方の説明ですが、多くの説明では一つの問題も説明されていません.
注意:data-**注意赤の位置は小文字のみ
data-先頭属性の使用方法は以下の通りです.
人々はいつもHTMLラベルにカスタム属性を追加してデータを格納し、操作するのが好きです.しかし、このような問題は、将来他のスクリプトがカスタム属性をリセットするかどうか分からないことです.また、html構文がHtml仕様に合致しないことや、他の副作用もあります.これは、HTML 5の仕様にカスタムdata属性が追加され、多くの役に立つことができます.HTML 5の詳細仕様を読むことができますが、このカスタムdata属性の使い方は非常に簡単です.HTMLラベルに「data」で始まる任意の属性を追加することができます.これらの属性ページには表示されず、ページレイアウトやスタイルに影響しませんが、読み書き可能です.次のコードクリップは、有効なHTML 5タグです.
コードは次のとおりです.
しかし、これらのデータをどのように読み取るのでしょうか.もちろん、ページ要素を巡って目的のプロパティを読み取ることができますが、jqueryにはこれらのプロパティを操作する方法が組み込まれています.jQueryを使用する.data()メソッドは、これらの「data-*」プロパティにアクセスします.その一つの方法は.Data(obj)、この方法はjQuery 1である.4.3バージョン後に表示され、対応するdataプロパティを返すことができます.例を挙げると、data-myidプロパティ値を次のように読み取ることができます.
コードは次のとおりです.
注意:data-**注意赤の位置は小文字のみ
data-先頭属性の使用方法は以下の通りです.
人々はいつもHTMLラベルにカスタム属性を追加してデータを格納し、操作するのが好きです.しかし、このような問題は、将来他のスクリプトがカスタム属性をリセットするかどうか分からないことです.また、html構文がHtml仕様に合致しないことや、他の副作用もあります.これは、HTML 5の仕様にカスタムdata属性が追加され、多くの役に立つことができます.HTML 5の詳細仕様を読むことができますが、このカスタムdata属性の使い方は非常に簡単です.HTMLラベルに「data」で始まる任意の属性を追加することができます.これらの属性ページには表示されず、ページレイアウトやスタイルに影響しませんが、読み書き可能です.次のコードクリップは、有効なHTML 5タグです.
コードは次のとおりです.
<div id="awesome" data-myid="3e4ae6c4e">Some awesome data</div>
しかし、これらのデータをどのように読み取るのでしょうか.もちろん、ページ要素を巡って目的のプロパティを読み取ることができますが、jqueryにはこれらのプロパティを操作する方法が組み込まれています.jQueryを使用する.data()メソッドは、これらの「data-*」プロパティにアクセスします.その一つの方法は.Data(obj)、この方法はjQuery 1である.4.3バージョン後に表示され、対応するdataプロパティを返すことができます.例を挙げると、data-myidプロパティ値を次のように読み取ることができます.
コードは次のとおりです.
var myid= jQuery("#awesome").data('myid'); console.log(myid);