jqueryスクリプトでダイナミックポストIDまたは値を取得する方法

Question

私は少しワードプレスのプラグイン "rate my whatever"に取り組んでいます。このプラグインは単一の投稿ではうまくいきますが、プラグインがいくつかの投稿があるとブログページに表示され、クリックが完了した投稿IDを見ることができません。それは常にそのページのちょっとした価値を取ります。

私はこの問題を解決するためにidとクラス名にpost idを追加しましたが（e g：post_id $ post-> ID）、このようにjqueryファイルを編集することはできません。

郵便投票項目のPHPコード：

<input type=\"hidden\" id=\"post_id$post->ID\" value=\"" . $post->ID . "\" /> 
    <div class=\"vote\"> 
<table> 
    <tr><td> 
    <a class=\"vote_up\" href=\"#\"></a></td> 
<td> 
    <a class=\"vote_down\" href=\"#\"></a></td></tr> 
    <tr> 
<td class=\"up_perc$post->ID\">" . get_percentage(1, $post->ID) ."%</td> 
<td class=\"down_perc$post->ID\">" . get_percentage(2, $post->ID) . "% </td> 
</tr> 
    </table></div> 

<div class=\"vote_succ$post->ID\"></div> 

jqueryのコード（投票アップのため、否決することはかなり同じです）：

jQuery(document).ready(function($) { 


     $(".vote_up").click(function(e) { 
     e.preventDefault(); 

     $.post('/wp-content/plugins/rate-my-whatever/rate.php', {vote_type: "1", post_id: $("#post_id1").val()}, function(data) { 

      $(".vote_succ1").html(data); 
      $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage", vote_type: "1", post_id: $("#post_id1").val()}, function(data2) { 
       $(".up_perc1").html(data2); 
      }); 
      $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage", vote_type: "2", post_id: $("#post_id1").val()}, function(data3) { 
       $(".down_perc1").html(data3); 
      }); 
     }); 
    }); 

私は後に静的に "1" を置きますいくつかのIDとクラスの要素は、私の問題が解決される方法を確認するために、それはIDと値が "1"であるポスト1でうまくいきます、#post_id、.vote_succ、.up_percの最後に "1" 、.down_percを動的コードで処理して、PHPコードで生成された動的要素と連携させることができます。

ありがとうございました。

Answer 1

クリックしたユニットで動作するようにコードを変更する必要があります。ページ全体のクラスのすべてのオブジェクトではなく、コードを変更する必要があります。同じ投票ユニット内の関連するオブジェクトを見つけるために

<div class=\"voteUnit\"> 
    <input type=\"hidden\" class=\"post_id\" value=\"" . $post->ID . "\" /> 
    <div class=\"vote\"> 
    <table> 
     <tr> 
      <td><a class=\"vote_up\" href=\"#\"></a></td> 
      <td><a class=\"vote_down\" href=\"#\"></a></td> 
     </tr> 
     <tr> 
      <td class=\"up_perc\">" . get_percentage(1, $post->ID) ."%</td> 
      <td class=\"down_perc\">" . get_percentage(2, $post->ID) . "% </td> 
     </tr> 
    </table> 
    </div> 

    <div class=\"vote_succ\"></div> 
</div> 

そして、その後、コードを変更します。それを行うための最も簡単な方法は、次のようにコンテナのdiv内の各ユニットを入れて、唯一のクラス名、ノーID値を使用することです$(this).closest('.voteUnit').find()をクリックしてクリックすると、Webページ全体を見て、すべての投票単位でオブジェクトを検索するのではなく、クリックされた投票単位でオブジェクトを検索します。 .closest('.voteUnit')は、親アイテムがclass=voteUnitになるまでクリックされたアイテムから祖先チェーンを検索します。コードは、それをサブツリーとして使用して、投票単位内の他のオブジェクトを検索することができます。

jQuery(document).ready(function($) { 
    $(".vote_up").click(function(e) { 
     var unit$ = $(this).closest('.voteUnit'); 
     e.preventDefault(); 

     $.post('/wp-content/plugins/rate-my-whatever/rate.php', {vote_type: "1", post_id: unit$.find(".post_id").val()}, function(data) { 

     unit$.find(".vote_succ").html(data); 
     $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage", vote_type: "1", post_id: unit$.find(".post_id").val()}, function(data2) { 
      unit$.find(".up_perc").html(data2); 
     }); 
     $.post('/wp-content/plugins/rate-my-whatever/rate.php', {action: "getPercentage", vote_type: "2", post_id: unit$.find(".post_id").val()}, function(data3) { 
      unit$.find(".down_perc").html(data3); 
     }); 
    }); 
});