单页多个点赞按钮仅首个生效 如何实现独立功能无需重复编码

问题根源 #

• document.querySelector() 仅会匹配页面中第一个符合选择器的元素，所以你当前只给第一条帖子的点赞按钮绑定了点击事件
• 全局唯一的like变量会被所有帖子共享，无法实现每个帖子独立计数

最优解决方案（事件委托） #

该方案不需要为每个按钮单独绑定事件，后续动态新增的帖子也能自动支持点赞功能，无需额外编码，你可以直接把原有JS代码全部替换为下面的内容：

// 给帖子父容器绑定点击事件，利用事件冒泡处理所有子按钮的点击
const postContainer = document.querySelector('#opslag-gruppe');

postContainer.addEventListener('click', (e) => {
  // 校验点击来源是否为点赞按钮
  const likeBtn = e.target.closest('.like');
  if (!likeBtn) return;

  // 找到当前按钮对应的点赞数节点
  const likeNumEl = likeBtn.nextElementSibling;
  // 读取当前点赞数累加后更新
  likeNumEl.textContent = Number(likeNumEl.textContent) + 1;
});

备选方案（遍历绑定） #

如果你不需要支持后续动态新增帖子，也可以选择遍历所有点赞按钮单独绑定事件：

// 获取页面所有点赞按钮
const allLikeBtns = document.querySelectorAll('.like');

allLikeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const likeNumEl = btn.nextElementSibling;
    likeNumEl.textContent = Number(likeNumEl.textContent) + 1;
  });
});

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