多同class帖子容器点击Like按钮无法获取对应Img src的问题解决

这个问题我之前也碰到过，核心原因有两个，咱们先理清楚，再给出修复方案：

问题根源 #

1. 重复的HTML ID：你的EJS模板里给所有图片都加了id="img"，给所有Like按钮加了id="like"——但HTML规范里ID必须是页面唯一的，当你用选择器找#img时，浏览器只会返回第一个匹配的元素，这就是为什么不管点哪个按钮都弹出第一张图的src。
2. 全局选择器错误：原代码里用$('.post-container').find('#img')是在所有帖子容器里找图片，自然只会拿到第一个匹配的结果，没有和当前点击的按钮关联起来。

修复方案 #

我们只需要两步就能搞定：

第一步：修正EJS模板，移除重复ID

把模板里重复的id="img"和id="like"去掉（或者改成动态唯一ID，不过这里用class足够了）：

<table id="posts">
 <% result.forEach(function(item){ %>
 <div class="post-container">
  <%= item.img_id%>
  <img src="<%= item.img_url %>" class="img"> <!-- 移除重复id -->
  <div><%= item.user_id%> </div>
  <input type="button" name="like" value="Like" class="like"> <!-- 移除重复id -->
 </div>
 <% }) %>
</table>

第二步：修改jQuery事件逻辑，关联当前按钮与对应图片

用$(this)获取当前点击的按钮，然后通过.closest()找到它所在的帖子容器，再在容器内查找图片，这样就能精准拿到对应帖子的图片src了：

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
 $(function(){
  $('.like').click(function(e){
   e.preventDefault();
   // 关键：从当前按钮向上找父容器，再在容器内找图片
   const targetImgSrc = $(this).closest('.post-container').find('.img').attr('src');
   alert(targetImgSrc);
  });
 });
</script>

关键逻辑说明 #

• $(this)：指代当前被用户点击的那个Like按钮，确保我们操作的是触发事件的元素。
• .closest('.post-container')：从当前按钮开始向上遍历DOM树，找到最近的带有post-container类的父元素，也就是当前按钮所在的帖子容器。
• .find('.img')：在找到的帖子容器内部查找带有img类的图片元素，这样就不会拿到其他帖子的图片了。

内容的提问来源于stack exchange，提问作者Ashish Goyal