동일한 페이지에 jQuery의 다중 인스턴스

Question

페이지의 항목 목록을 동적으로 생성했습니다. 각 항목의 $ itemid를 쉽게 얻을 수 있습니다.

각각에 대한 투표를 설정하려고하지만 투표 링크의 인스턴스가 서로 혼동되지 않도록 충분히 다른 인스턴스를 만들 수 없으며 예상대로 페이지가 시도되고 있습니다. 당신의 HTML에, 내 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

확인에 모든 항목을 게시 :

<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> 

(물론, 당신의 HTML을 생성하여 PHP) 이미 어딘가에 항목 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 코드는 —에 한 번만 필요하며 더 좋게는 가져 오는 별도의 파일에있을 수 있습니다. .data()에

$(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); 

      } 
      }); 
    }); 
}); 

그 호출은 그 세 "데이터 -"에서 값을 추출 <a> 속성.

난 단지 클릭 년대 <a>가 투표 후 기절됩니다 있는지 확인하기 위해 위의 기능을 업데이트 — 편집. "$ voteBlock"변수를 추가했습니다. 의 부모 <span>이됩니다. (그런데, 정말 <span> 내부 <p>을 넣어 올바른 HTML은 아니지만, 아마도 과감한 문제가 발생하지 않습니다. 당신은 <div>와 <span>하지만 무엇을 대체 할 수있다.)