在同一頁面上的多重jQuery實例

Question

我有一個頁面上的項目列表動態生成 - 我可以很容易地得到每一個的$ itemid。

我想爲每個人設置一個投票，但是我不能讓這些實例足夠不同，以便投票鏈接的實例不會互相混淆，而且頁面正在按照您的預期嘗試張貼的所有項目，我的vote.php頁

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $(".submitVote a").click(function() 
     { 
      var ID = <?php echo $itemid;?>; 
      var add = 1; 
      var votedby = <?php echo $usr_id ;?>; 
      var rating = <?php echo $ratings;?> 

      var queryString = 'id='+ ID +'&votedby='+votedby +'&add='+add +'&rating='+rating; 
      $("#vote").text(rating+1); 

       $.ajax({ 
       type: "POST", 
       url: "vote.php", 
       data: queryString, 
       cache: false, 
       success: function(html) 
       { 

        $(".submitVote").html('<p style="margin:1px;padding:0px;"></p>'); 
        $("#greet").html("Thanks for voting!"); 
        $("#greet").delay(500).fadeOut(5000); 

       } 
       }); 
     }); 
    }); 
</script> 

    <div id="<?php echo $itemid;?>" style="width:350px;"> 
     <span class="submitVote" > 
      <p style="margin:1px;padding:0px;"> 
       Submit your <a href="#">vote</a> 
      </p> 
     </span> 
     <div id="voteBox"> 
      <div id="vote<?php echo $itemid;?>"> <?php echo $ratings;?> </div> 
      <span style="color:#fae240;">votes</span> 
     </div> 
     <div id="greet" style="padding-left:65px;"></div> 
    </div> 

Answer 1

OK，在你的HTML：

<div id="<?php echo $itemid;?>" style="width:350px;"> 
    <span class="submitVote" > 
     <p style="margin:1px;padding:0px;"> 
      Submit your <a href="#">vote</a> 
     </p> 
    </span> 
    <div id="voteBox"> 
     <div id="vote<?php echo $itemid;?>"> <?php echo $ratings;?> </div> 
     <span style="color:#fae240;">votes</span> 
    </div> 
    <div id="greet" style="padding-left:65px;"></div> 
</div> 

（當然，你的PHP生成的HTML），你已經把一個物品ID的地方。你可以做的就是把它添加到<a>，使其更容易在「點擊」處理程序，以發現：

Submit your <a href='#' data-item-id='<?php echo $itemid;?>' data-ratings='<?php echo $ratings;?>' data-user-id='<? php echo $usr_id; ?>'>vote</a> 

用戶ID很可能被藏匿只有一次，但我會離開它像，爲了簡化。通過這樣做，投票所需的一切就在<a>本身。這很有用，因爲您的事件處理程序將使用該DOM節點作爲this進行調用。因此，您只需要在您的頁面上使用JavaScript代碼—，或者更好的是，它可以位於您導入的單獨文件中。

$(document).ready(function() 
{ 
    $(".submitVote a").click(function() 
    { 
     var $clicked = $(this); 
     var $voteBlock = $clicked.closest('.submitVote'); 
     var ID = $clicked.data('item-id'); 
     var add = 1; 
     var votedby = $clicked.data('user-id'); 
     var rating = $clicked.data('ratings'); 

     var queryString = 'id='+ ID +'&votedby='+votedby +'&add='+add +'&rating='+rating; 
     $("#vote").text(rating+1); 

      $.ajax({ 
      type: "POST", 
      url: "vote.php", 
      data: queryString, 
      cache: false, 
      success: function(html) 
      { 

       $voteBlock.html('<p style="margin:1px;padding:0px;"></p>'); 
       $("#greet").html("Thanks for voting!"); 
       $("#greet").delay(500).fadeOut(5000); 

      } 
      }); 
    }); 
}); 

到.data()這些呼籲來自這三個「數據 - 」提取值的<a>屬性。

編輯 —我更新上面的功能，以確保只有被點擊了<a>投票後得到的手段傳給。我添加了變量「$ voteBlock」，它將是<a>的父<span>。 （順便說一下，它不是真正正確的HTML把一個<p>一個<span>裏面，但它可能不會引起劇烈的問題，你可以更換<span>與<div>但不管。）