Jquery

jQuery Data（）APIを使用してデータ属性を設定できません



Unable Set Data Attribute Using Jquery Data Api



解決：

それはで言及されています.data（）ドキュメント

data-attributesは、データプロパティが最初にアクセスされたときにプルされ、その後アクセスまたは変更されなくなります（その後、すべてのデータ値はjQueryに内部的に格納されます）



これについては、jQuery $ .fn.data（）を変更して対応するhtml 5データ-*属性を更新しない理由についても説明しました。

以下の私の元の答えのデモはもう機能していないようです。



更新された回答

繰り返しますが、.data（）ドキュメント

ダッシュが埋め込まれた属性の処理は、W3CHTML5仕様に準拠するようにjQuery1.6で変更されました。



だから以下は真実です$（ 'div'）。data（ 'role'）=== 'ページ'

私はかなり確信しています$（ 'div'）。data（ 'data-role'）は過去に機能していましたが、現在はそうではないようです。コンソールを開くのではなく、HTMLにログを記録するより良いショーケースを作成し、マルチハイフンからキャメルケースへのデータ属性変換の例を追加しました。

デモを更新しました（2015-07-25）

jQuery Data vs Attr？も参照してください。

HTML 

    
 
セッターゲッターゲッターを呼び出した結果ノート
 
  
  JavaScript （jQuery 1.6.2 +）
 
var $ changeMe = $（ '＃changeMe'）; var $ log = $（ '＃log'）; var logger; （logger = function（setter、getter、note））（ ''、 '。data（' key '）'、 '初期値'）; $（ '＃changeData'）。click（function（）{//データキーを新しい値に設定しますlogger（ '。data（' key '、' leia '）'、 '。data（' key '）'、 ' jQueryノードオブジェクトでleiaを期待しますが、DOMはluke '）; // .attrを介してデータキーを設定し、いくつかのメソッドlogger（'。attr（ 'data-key'、 'yoda'） '、'を介して取得します。 data（ 'key'） '、' jQueryオブジェクトにleia（まだ）を期待しますが、DOMはyodaになりました '）; logger（' '、'。attr（ 'key'） '、'未定義を期待します（attrなし鍵）'）; logger（ ''、 '。attr（' data-key '）'、 'DOMおよびjQueryオブジェクトでヨーダを期待します'）; //ボーナスポイントlogger（ ''、 '。data（' data-key '）'、 'expect undefined（cannot get via this method）'）; logger（ '。data（' anotherKey '）'、 '。data（' anotherKey '）'、 'jQuery 1.6+ get multi hyphendata-another-key '）; logger（ '。data（' another-key '）'、 '。data（' another-key '）'、 'jQuery<1.6 get multi hyphen data-another-key（jQuery 1.6以降でもサポートされています） '）; falseを返します。 }）; $（ '＃changeData'）。click（）;
 
  古いデモ  
 
 
  元の答え  
 
このHTMLの場合：
 
  データ値の変更   
そしてこのJavaScript（jQuery 1.6.2を使用）
 
console.log（$（ '＃foo'）。data（ 'helptext'））; $（ '＃changeData'）。click（function（）{$（ '＃foo'）。data（ 'helptext'、 'Testing 123'）; // $（ '＃foo'）。attr（ 'data-helptext '、'テスト123 '）; console.log（$（'＃foo '）。data（' data-helptext '））; return false;}）;
  デモを見る  
 
ChromeDevToolsの使用 コンソール DOMを検査するには、$（ '＃foo'）。data（ 'helptext'、 'テスト123'）; ではない に見られるように値を更新します コンソール しかし$（ '＃foo'）。attr（ 'data-helptext'、 'テスト123'）; NS。
  
私は深刻な問題を抱えていました
 
.data（ 'property'、value）;
設定していませんでしたdata-property属性。
 
jQueryの使用を開始しました.attr（）：
  
 
一致した要素のセットの最初の要素の属性の値を取得するか、一致したすべての要素に1つ以上の属性を設定します。
 
 
.attr（ 'property'、value）
値を設定し、
 
.attr（ 'property'）
値を取得します。
 
今ではうまくいきます！
  
@andybの受け入れられた回答には小さなバグがあります。上記の彼の投稿に対する私のコメントに加えて...
 
このHTMLの場合：
 
  データ値の変更   
次のように属性にアクセスする必要があります。
 
$（ '＃foo'）。attr（ 'data-helptext'、 'テスト123'）;
しかし、このようなデータメソッド：
 
$（ '＃foo'）。data（ 'helptext'、 'テスト123'）;
上記の.data（）メソッドの修正により、「未定義」が防止され、データ値が更新されます（HTMLは更新されません）。
 
'data'属性のポイントは、値を要素にバインド（または 'リンク'）することです。と非常によく似ていますアクションを要素にバインドするdo_something '）'属性...テキストは役に立たないので、要素をクリックしたときにアクションを機能させたいだけです。
 
データまたはアクションが要素にバインドされると、 いつもの* HTMLを更新する必要はなく、データまたはメソッドのみを更新します。これは、アプリケーション（JavaScript）が使用するものだからです。パフォーマンスの面では、とにかくHTMLも更新する理由がわかりません。html属性は誰にも表示されません（Firebugまたは他のコンソールを除く）。
 
あなたがそれについて考えたいと思うかもしれない1つの方法：HTMLは（属性と共に）単なるテキストです。 JavaScriptで使用されるデータ、関数、オブジェクトなどは別の平面に存在します。 JavaScriptがそうするように指示された場合にのみ、JavaScriptはHTMLテキストを読み取ったり更新したりしますが、JavaScriptで作成するすべてのデータと機能は、Firebug（または他の）コンソールに表示されるHTMLテキスト/属性とは完全に別個に機能します。
 
*私は強調します いつもの HTMLを保存してエクスポートする必要がある場合（たとえば、ある種のマイクロフォーマット/データ対応テキストエディタ）、HTMLが別のページに新しく読み込まれる場合は、HTMLも更新する必要があるかもしれません。