Javascript 查看来自多个元素的AJAX请求的响应数据

我的网站上有一个类似的系统。每条消息旁边都有一个Like按钮和一个计数器。
现在，当有人单击Like按钮时，它应该立即变为1，如果另一个用户单击同一条消息，则每个消息都会变为2，依此类推

我创建了执行此操作所需的AJAX函数，但我使用的是

document.getElementById

，它只检索找到的第一个实例并查看来自AJAX请求的响应

我怎样才能使它在每封邮件中都能被查看

以下是我的AJAX请求：

jQuery(document).ready(function($){
    $('.msg-icon').on('click', function(e){
    e.preventDefault(); 
 
    var reply_id = $(this).find('input[name="replymsg"]').val();
   var request = reply(reply_id); 
   
    request.done(function() { 
      checkLikes(reply_id);
    });
  });
});
   
  
function reply(reply_id) {
  return $.ajax({ 
    data: reply_id, 
    type: "post", 
    url: "replyfavorite.php?replymsg="+reply_id, 
  });
}

function checkLikes(reply_id) {
  return $.ajax({
    data: { reply: reply_id },
    type: "get",
    url: "checkLikes.php?reply=" + reply_id,
    success: function(data) {
      document.getElementById('likesCount').innerHTML = data; //what can i change here to make the data go to each clicked button?
    }
  });
}

以下是我的html按钮，用户可单击该按钮查看每条消息：

<a href="" class="msg-icon" >

<i class="fas fa-heart fa-lg" id="favBtn" style="color: #e74f4e !important;"  >
  <span id="likesCount"><?php echo $row3['likes_count'] ?>
</span></i></a>

---

代码运行良好，我唯一的问题是如何让响应只转到单击的消息按钮。

既然您使用的是jquery，为什么不使用$（“#likeCount”）.each（function（）{……}）；要循环遍历每个项目，您可以在每个部分中插入一个ajax请求，以查找当前值，可能使用$.post（）或$.get（），具体取决于您的api

更新：（改进我的答案） 我了解文档中元素id的唯一性

我真正想说的是，您可能需要改变如何查看/搜索每个跨度中包含的细节的方法。在那里，您可以通过使用类或自定义属性对span对象进行分组，然后使用$.each函数对其进行迭代来识别span对象。完成事情没有单一的方法，这只是一个如何用正确的内容更新每个元素的想法。

正如您所注意到的，ID应该是唯一的。而不是使用

document.getElementById（'likeCount'）。innerHTML=data

使用

即：

这将使用最新的likes计数更新页面上任意数量的
data id=“
元素

PS:如果您想让您的计数“实时”-而不是使用仅一次往返的AJAX（请求→ 回答），您可以使用

通过使用Web套接字，您可以确保在任何客户端和服务器之间进行初始握手，而不是在这两个客户端之间同时共享多个客户端的小数据包。这样，您就不需要重复AJAX时间间隔，您的所有来宾都会“自动”看到“喜欢”更改值。
@RokoC.Buljan这是问题中的一个输入错误………@RokoC.Buljan您对我的问题有什么解决方案吗？我只是确保问题没有丢失结束标记。（提问时，确保创建一个-不要遗漏细节-否则您将收到子注释而不是详细答案。）您有以下代码：
$（this.find（'input[name=“replymsg”]”）。val（）
您能解释一下吗？@RokoC.Buljan我没有遗漏任何内容。。。我已经说过代码运行良好，并准确地解释了我的问题所在。请提供答案，不要转移我的问题。这无法回答我的问题。您建议：
为什么不使用$（“#likecount”）。每个（
.Julio，
#likeCount
是和ID选择器，并且不需要
每个
，因为在一个页面中只能有一个ID元素。另外，由于在jQuery中，选择器包装在jQuery对象中，因此jQuery提供了许多内部（在库中）的方法已经使用
。每个
。例如，假设您有许多
。foo
元素：
$（“.foo”）。文本（“BAR”）
将更改所有这些元素的文本-无需为每个元素更改文本（就像我们在纯JS中需要做的那样）。谢谢，令人惊讶的答案。这将在我的项目的未来领域帮助我
<span data-id="536">12</span>

success: function(data) {
  $(`[data-id="${reply_id}"]`).text(data)
}