.replaceWith() работает только один раз

Я пытаюсь внедрить систему репутации пользователей на моем сайте. Таким образом, вы можете видеть номер повтора после имени пользователя каждый раз, когда он взаимодействует (например, каждый раз, когда он делает комментарий). Существует также система голосования, которая также изменяет репутацию пользователя, и я хочу, чтобы номер номера отражал это изменение. Поэтому я вызываю файл через ajax, который возвращает новый номер rep для этого пользователя. Файл html/php является чем-то вроде первого экземпляра (если он делает сообщение):

echo '<div class="rep_user_id" id="rep_user_id_'.$posts_row['userid'].'"> '.$posts_row['user_rep'].'</div>';

а затем (если он делает комментарий):

echo '<div class="rep_user_id" id="rep_user_id_'.$com_row['userid'].'">'.$com_row['user_rep'].'</div>';

оба дают мне это:

<div class="rep_user_id" id="rep_user_id_110">293</div>

Тогда js:

function change_reps() {
var userid = $('.rep_user_id').attr('id').replace('rep_user_id_','');
$.ajax({
 url: "vote/get_reputation.php",
 data: "userid="+userid,
 success: function(server_response){
 $("body").ajaxComplete(function(event, request){
   var reputation = server_response;
   $('#rep_user_id_'+userid).replaceWith(''+reputation);
   $('#rep_user_id_'+userid).effect("highlight", {color:'red'}, 1000);
 });  } });  }

Эта функция вызывается после успеха другого ajax (для обновления rep и голосов). Итак, из этого, что работает: как только я нажимаю стрелку вверх или вниз, я вижу счетчик голосования вверх или вниз, но я вижу, что пользовательский реестр меняет только первый экземпляр (post). Почему он меняется только один раз, а не по всему документу? Есть ли что-нибудь, что раздел комментариев вызывается из другого файла (с включенным)? FYI эффект действует во всех случаях! Надеюсь, ты поможешь. Благодаря

EDIT:. Поскольку я видел, что я не очень хорошо себя объяснил, добавляю еще несколько строк. Проблема в том, что я не могу изменять несколько элементов с одним и тем же идентификатором и классом только один раз (в отличие от изменения одного элемента несколько раз). Таким образом, у меня есть 293 раза на странице, но в коде добавлен только один элемент! Это то, что вызывает change_reps():

$("body").on("click", ".vote_com_up", function(){
   var com_id = $(this).attr('id').replace('vote_com_up_','');
   $.ajax({ 
    url: "vote/comment_vote.php",
    data: "com_action=2&com_id="+com_id,
    success: function(server_response){
    $(".vote_com_number").ajaxComplete(function(event, request){
     if(server_response == 'voted')
       { alert("Ya has votado en este post!");}
    else{
       var new_com_votes = server_response; 
       $("#vote_com_number_"+com_id).html(+new_com_votes);
    } }); } 
   }).done(function() {
    change_reps();
   });
   return false;
 });

Я сделал небольшой jsfiddle, чтобы показать, что я хочу:

http://jsfiddle.net/CMgYb/1/

РЕШЕНИЕ: Брайан Нейгел прав: мне нужны классы вместо ids.

Ответ 1

Вероятно, это связано с тем, что вы выбираете идентификатор, который захватит первое вхождение этого идентификатора. Вам нужно использовать классы.

Ответ 2

Вы получаете доступ к этому элементу id, а затем заменяете его чем-то новым. Единственный способ, которым это будет работать во второй раз, - это то, что вы его замените, имеет тот же идентификатор, что и раньше; Я предполагаю, что это не так.

Вы уверены, что не хотите устанавливать контент этого элемента с помощью функции html:

$('#rep_user_id_' + userid).html('' + reputation);

ИЗМЕНИТЬ

Более внимательно изучая ваш PHP, похоже, что вы закодировали это, чтобы фактически заменить весь div. Тем не менее, я бы рекомендовал не кодировать ваш PHP для создания правильных идентификаторов элементов. Подумайте об обрезке этого PHP вниз, чтобы вы просто отправляли контент div. Тогда вы можете гораздо проще использовать html, как указано выше.

Ответ 3

В соответствии с документами jQuery:

The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.

Это означает, что когда вы делаете:

$('#rep_user_id_'+userid).replaceWith(''+reputation);

Он изменяется:

<div class="rep_user_id" id="rep_user_id_110">293</div>
//to
293

Итак, во второй раз, когда он запускает ajax, он не может найти id rep_user_id. Самый простой способ решить это - изменить innerHTML на text() (обратите внимание: вы также можете использовать hml(), но в этом случае text() работает лучше, потому что нет тегов html).

$('#rep_user_id_'+userid).text(reputation);