JavaScript动画仅作用于首个点赞按钮，多按钮场景如何实现？

问题根源 #

你当前代码用了getElementById('heart')，但HTML里的ID是唯一标识，这个方法只会获取页面中第一个带id="heart"的元素，所以只有第一个按钮能触发动画。

修改方案 #

要让所有点赞按钮都正常工作，只需做以下两步改动：

1. 调整HTML：把ID替换为类名

将所有点赞按钮的id="heart"改成class="heart"（类名支持重复使用）：

<div class="card_btns">
  <svg xmlns="http://www.w3.org/2000/svg" class="heart" viewBox="0 0 24 24">
       <path stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
   </svg>
</div>
<!-- 可以重复添加任意多个相同结构的点赞按钮 -->
<div class="card_btns">
  <svg xmlns="http://www.w3.org/2000/svg" class="heart" viewBox="0 0 24 24">
       <path stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
   </svg>
</div>

2. 重写JavaScript：批量绑定事件

用querySelectorAll('.heart')获取所有点赞按钮，循环给每个按钮绑定点击事件，同时在回调里用this操作当前点击的元素：

window.addEventListener('DOMContentLoaded', () => {
  // 获取页面中所有带heart类的按钮
  const hearts = document.querySelectorAll('.heart');

  const likeUnlikePost = function() {
    // this 指向当前被点击的那个按钮
    if (this.classList.contains('like')) {
      this.classList.remove('like');
      this.classList.add('unlike');
    } else {
      this.classList.remove('unlike');
      this.classList.add('like');
    }
  }

  // 遍历每个按钮，绑定点击事件
  hearts.forEach(heart => {
    heart.addEventListener('click', likeUnlikePost);
  });
})

额外说明 #

• querySelectorAll会返回一个包含所有匹配元素的集合，必须用forEach遍历才能给每个元素绑定事件。
• 事件回调里的this默认指向触发事件的元素，这样就能精准操作当前点击的按钮，不会影响其他按钮。

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