jqueryキーに値を割り当てる.data（）は動作しません。

Question

私はかなり簡単な（1つは思いつくでしょう）タスクを持っています。

値をポップアップウィンドウに渡し、クリック（進捗またはキャンセル）に基づいて、渡された値を使用してアクションを実行します。

// on click we pass the value to the function testing - so far so good 
$('#numbers').delegate('.icondelete', 'click', function(){ 
    testing($(this).attr('data-options')); 
}); 

私はキー

function testing(id){ 
    //we can see that it passed successfully 
    alert("here it is: " + id); 

    //push the data into key data-id 
    $('#dodelete').data('data-id',id); 

//but this alert doesn't return the value 
alert("it should be here shouldn't it? " + $('#dodelete').attr('data-id')); 
    } 

HTML

<div id='numbers' > 
<div class='icondelete' data-options='123' >Set data-options as 123 - click here to test</div> 
</div> 

<br><br> 
<div id='dodelete' data-id=''>landing div</div> 

あなたはフィドルhttp://jsfiddle.net/Microbe/cRLfC/4/をチェックアウトする場合は、あなたが見ることができるに代入してみた後、関数に見つかった値を渡します値は関数no probsに渡されますが、私はそれをキーに代入しようとするとそれはしません。

どこが間違っていますか？

Answer 1

.data()を使用する場合は、接頭辞data-を追加しないでください。値を読み取るときは、.attr()ではなく.data("key")を使用してください。 thisを読んで、コード例を見てみることをお勧めします。

だからあなたのコードは次のようになります。.data()経由

function testing(id) { 
    //we can see that it passed successfully 
    alert("here it is: " + id); 

    //push the data into key myid 
    $('#dodelete').data('myid', id); 

    //but this alert doesn't return the value 
    alert("it should be here shouldn't it? " + $('#dodelete').data('myid')); 
} 

設定値は、実際にはその値を持つオブジェクトの属性/プロパティを設定しません。データは実際にはjQueryデータ構造体に格納され、.attr("key")ではなく、.data("key")で取得されます。

実際の属性を設定する場合は、.attr("key", value)で行いますが、jQueryコーディングでは通常、カスタム属性よりも.data()を使用する方が良いです。

だけの時間は、カスタムのためのHTML5の標準ごとにこのようなあなたのHTMLにカスタム属性を置けばあなた自身があるdata-接頭辞を使用するには、属性：

<div id="myObject" data-numloops="20"></div> 

を次に、あなたはこれでそれを読むことができます：

var loopCnt = $("#myObject").data("numloops"); 

データ値を照会すると、jQueryはまず内部ストレージを調べます。そこに見つからない場合、名前に一致するHTML5データ属性が検索されます。

Answer 2

私はこの実装が気に入らないのは、一方では 'data-xxx'属性を読み込みますが、他方ではそれを書き込まないからです。キャッシュを持ち、オブジェクトや関数を格納することが容易であるためです。

これは「副作用によるプログラミング」と呼ばれています。混乱し、互いに干渉する2つの異なる概念が混在しています。私はそれが厳密には「行かない」と思う。オブジェクトをDOM要素にリンクするには、主にほとんどのユースケースをカバーするイベントハンドラを使用する方法があります。 「状態」に依存する複雑なデータは、オブジェクトのメンバーとして配置する必要があり、残りのユースケースを行う必要があります。オブジェクトをイベントハンドラのデータに入れて、必要なものすべてを用意してください。それが「OOP」のアプローチです。これはC++、C＃、Javaで動作し、JavaScriptで動作しない理由はありません。メモリリークや不整合なデータの可能性は非常に低くなります。

ですので、これらの機能は使用しないでください。それについて考えることさえしないでください。 OOPパターンをより良く学習し、最初からうまくやってください！