0

同じクラス (bio) を持つ 20 個の div があります。

<div class="bio" data-id="<? echo $id; ?>">
  <p>the bio1 text</p>
  <a id="car" href="http://www.mycustomurl.com">my car 1</a>
</div>

<div class="bio" data-id="<? echo $id; ?>">
  <p>the bio2 text</p>
  <a id="car" href="http://www.mycustomurl.com">my car 2</a>
</div>

--------

<div class="bio" data-id="<? echo $id; ?>">
  <p>the bio20 text</p>
  <a id="car" href="http://www.mycustomurl.com">my car 20</a>
</div>

誰かが id carのリンクをクリックすると、次の ajax 呼び出しを行います。

jQuery("#car").click(function(){
    var id = $(".bio").data('id'); /* HERE IS THE PROBLEM, id is always empty */
    jQuery.ajax({  
        type: 'POST', 
        url: 'myajaxurl',  
    data: {  
       action: 'cars',
       id: id
    }
        });  
});

問題は：

クリックされた正しいリンクに対応する正しいID 値(var id)を取得するにはどうすればよいですか?

ループごとにjqueryが必要ですか?

動作していないようです。var idは常に空です。

4

3 に答える 3

0

.parent()を使いたいと思います

次のように:

jQuery("#car").click(function(){
 var id = $(this).parent(".bio").data("id"); /* Maybe this should even be .data("data-id") ? */
 jquery.ajax({ /* etc... */
});
于 2012-09-18T17:23:57.947 に答える
0

を使用しclosestます。

var id = $(this).closest(".bio").data('id');
于 2012-09-18T17:24:10.733 に答える
0

ID は一意である必要があり、重複してはなりません。

以下のようにハンドラーをバインドしようとする代わりに、

jQuery('.bio a').click( function(){
   var id = $(this).parent().data('id');
   //..

すると、最初の div グループ専用のjQuery("#car").click(function () {ID を持つ最初の一致する要素にハンドラーがバインドされます。car

于 2012-09-18T17:24:13.330 に答える