如何用querySelectorAll替代querySelector实现所有点赞按钮正常工作？

问题根源 #

1. 原代码仅通过querySelector('#like')获取单个按钮，无法作用于所有按钮
2. 全局的state和like变量会被所有按钮共用，导致状态混乱
3. writeCounter函数硬绑定了初始的单个按钮，无法适配多个按钮的独立操作

修改方案 #

1. 调整HTML（移除重复ID，改用类选择器）

多个按钮不能使用相同ID，所以把按钮和计数器的ID改为类：

<!-- 第一个点赞按钮 -->
<button class="button__like">
  <div class="icon">
    <svg class="prime" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path>
    </svg>
    <svg class="normal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path fill="currentColor" d="M256 448a32 32 0 01-18-5.57c-78.59-53.35-112.62-89.93-131.39-112.8-40-48.75-59.15-98.8-58.61-153C48.63 114.52 98.46 64 159.08 64c44.08 0 74.61 24.83 92.39 45.51a6 6 0 009.06 0C278.31 88.81 308.84 64 352.92 64c60.62 0 110.45 50.52 111.08 112.64.54 54.21-18.63 104.26-58.61 153-18.77 22.87-52.8 59.45-131.39 112.8a32 32 0 01-18 5.56z"></path>
    </svg>
  </div>
  <div class="counter"></div>
</button>

<!-- 可添加多个相同结构的按钮 -->
<button class="button__like">
  <div class="icon">
    <svg class="prime" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path>
    </svg>
    <svg class="normal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path fill="currentColor" d="M256 448a32 32 0 01-18-5.57c-78.59-53.35-112.62-89.93-131.39-112.8-40-48.75-59.15-98.8-58.61-153C48.63 114.52 98.46 64 159.08 64c44.08 0 74.61 24.83 92.39 45.51a6 6 0 009.06 0C278.31 88.81 308.84 64 352.92 64c60.62 0 110.45 50.52 111.08 112.64.54 54.21-18.63 104.26-58.61 153-18.77 22.87-52.8 59.45-131.39 112.8a32 32 0 01-18 5.56z"></path>
    </svg>
  </div>
  <div class="counter"></div>
</button>

2. CSS无需修改（保持原代码即可）

3. 重写JavaScript（实现多按钮独立状态）

通过querySelectorAll获取所有按钮，为每个按钮单独初始化状态并绑定事件，用闭包维护每个按钮的独立点赞数和状态：

// 获取所有点赞按钮
const likeButtons = document.querySelectorAll('.button__like');

// 遍历每个按钮，初始化状态和事件
likeButtons.forEach(button => {
  // 为每个按钮单独维护状态和点赞数
  let state = false;
  let likeCount = 0;
  const counterElm = button.querySelector('.counter');

  // 初始化计数器和样式
  writeCounter(likeCount, counterElm);
  setState(state, button);

  // 绑定点击事件
  button.addEventListener('click', () => {
    if (!state) {
      likeCount++;
      state = true;
    } else {
      likeCount--;
      state = false;
    }
    writeCounter(likeCount, counterElm);
    setState(state, button);
  });
});

// 更新计数器文本
function writeCounter(number, elm) {
  elm.innerHTML = number;
}

// 更新按钮样式状态
function setState(state, elm) {
  if (state) {
    elm.classList.remove('dislike');
    elm.classList.add('active');
  } else {
    elm.classList.remove('active');
    elm.classList.add('dislike');
  }
}

关键改进点 #

• 使用querySelectorAll('.button__like')批量获取所有点赞按钮
• 每个按钮通过闭包拥有独立的state和likeCount变量，避免状态冲突
• 所有操作函数改为接收具体元素参数，不再依赖全局变量
• HTML中移除重复ID，改用类选择器保证多按钮的合法性

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