.replaceWith() chỉ hoạt động khi

Question

Tôi đang cố triển khai hệ thống danh tiếng của người dùng trong trang web của mình. Vì vậy, bạn có thể thấy số đại diện sau tên của người dùng mỗi khi anh ấy tương tác (ví dụ: mỗi khi anh ấy nhận xét). Ngoài ra còn có một hệ thống bỏ phiếu cũng làm thay đổi danh tiếng của người dùng và tôi muốn số đại diện phản ánh thay đổi đó. Vì vậy, tôi đang gọi một tập tin thông qua ajax mà trả về số đại diện mới cho người dùng đó. Các tập tin html/php là một cái gì đó như thế này ngay từ đầu (nếu anh ta làm cho một bưu điện):

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

và sau đó (nếu anh ta làm cho một bình luận):

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

cả cho tôi này:

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

Sau đó 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); 
}); } }); } 

Chức năng này được gọi sau thành công của ajax khác (để cập nhật đại diện và phiếu bầu). Vì vậy, từ điều này, những gì làm việc: một khi tôi nhấp vào bất kỳ mũi tên lên hoặc xuống tôi có thể nhìn thấy biểu quyết truy cập lên hoặc xuống nhưng tôi chỉ nhìn thấy đại diện người dùng thay đổi trường hợp đầu tiên chỉ (bài). Tại sao nó chỉ thay đổi một lần chứ không phải trong toàn bộ tài liệu? Có bất cứ điều gì để làm điều đó phần bình luận được gọi từ một tập tin khác (với một bao gồm)? FYI hiệu quả hoạt động trong mọi trường hợp! Hy vọng bạn có thể giúp đỡ. Cảm ơn

EDIT: Vì tôi đã thấy rằng tôi không giải thích cho bản thân mình rất rõ, tôi đang thêm một vài dòng nữa. Vấn đề là tôi không thể sửa đổi nhiều phần tử với cùng một id và lớp chỉ một lần (thay vì thay đổi một phần tử nhiều lần). Vì vậy, tôi có 293 nhiều lần trong suốt trang nhưng mã được đăng chỉ thay đổi một phần tử! Đây là những gì gây nên 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; 
}); 

tôi đã thực hiện một jsfiddle nhỏ để hiển thị những gì tôi muốn:

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

SOLUTION: Bryan Naegele nói đúng: Tôi cần lớp thay vì id.

Answer 1

Có thể có điều gì đó liên quan đến việc bạn đang chọn ID sẽ lấy lần xuất hiện đầu tiên của ID đó. Bạn cần phải sử dụng các lớp học.

Answer 2

Bạn đang truy cập phần tử này theo số id, sau đó thay thế nó bằng thứ gì đó mới. Cách duy nhất này sẽ làm việc lần thứ hai là nếu những gì bạn thay thế nó có cùng id như trước đây; Tôi đoán là không.

Bạn có chắc chắn bạn không muốn thiết lập các nội dung của nguyên tố này với html chức năng:

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

EDIT

Nghiên cứu kỹ hơn PHP của bạn, nó trông như bạn đã mã hóa điều này để thực sự thay thế toàn bộ div. Tuy nhiên, tôi sẽ khuyên bạn nên chống lại mã hóa PHP của bạn để tạo ra các ID phần tử chính xác. Cân nhắc cắt bớt PHP này để bạn chỉ cần gửi nội dung của div. Sau đó, bạn có thể đơn giản hơn nhiều chỉ sử dụng html như trên.

Answer 3

Theo các tài liệu jQuery:

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

Điều này có nghĩa là khi bạn làm:

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

Nó thay đổi:

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

Vì vậy, lần thứ hai nó cháy ajax nó không thể tìm thấy id rep_user_id. Cách dễ nhất để giải quyết vấn đề này là thay đổi innerHTML bằng text() (lưu ý: bạn cũng có thể sử dụng hml() nhưng trong trường hợp này text() hoạt động tốt hơn vì không có thẻ html).

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