Множественные экземпляры 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

ОК, в вашем 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) вы уже положить идентификатор товара где-то. Что вы можете сделать, это добавить его в <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> 

Идентификатор пользователя, вероятно, может быть спрятан только один раз, но я оставлю это так для простоты , Делая это, все, что вам нужно для голосования, находится прямо на самом <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», которая будет родителем <span><a>. (Кстати, это не совсем правильно HTML поставить <p> внутри <span>, но это, вероятно, не вызовет кардинальные проблемы. Вы могли бы заменить <span> с <div>, но что угодно.)