如何使用querySelectAll切换多个元素的CSS类？

原代码的核心问题 #

1. 选择器语法错误：document.querySelectorAll('.slotimage', '.charname')写法不对，该方法只接受一个包含多选择器的字符串，正确写法是document.querySelectorAll('.slotimage, .charname')。
2. 索引分配错误：你给每个元素单独分配了全局索引（从0到总元素数-1），导致图片和对应文字的索引不一致，无法关联配对。
3. 未处理配对元素：点击事件只修改了当前点击元素的类，没有找到并修改对应的另一个元素。

解决方案 #

根据你的场景，推荐两种实现方式，选适合你DOM结构的即可：

方式1：基于父容器关联（推荐，DOM结构更清晰）

假设每个角色的图片和名字都包裹在同一个父容器中（比如类名为char-slot的div），这样可以通过父容器快速找到配对元素：

<!-- 示例DOM结构 -->
<div class="char-slot">
  <img class="slotimage unselected" src="角色图1">
  <span class="charname unselected">角色名1</span>
</div>
<div class="char-slot">
  <img class="slotimage unselected" src="角色图2">
  <span class="charname unselected">角色名2</span>
</div>

function selector() {
  // 获取所有角色容器
  const charSlots = document.querySelectorAll('.char-slot');
  
  charSlots.forEach((slot, groupIndex) => {
    // 从容器中取出当前组的图片和名字元素
    const img = slot.querySelector('.slotimage');
    const nameSpan = slot.querySelector('.charname');
    
    // 绑定点击事件，点击任意一个元素都触发同步切换
    const toggleSelection = () => {
      // 同时切换两个元素的类
      img.classList.toggle('unselected');
      img.classList.toggle('selected');
      nameSpan.classList.toggle('unselected');
      nameSpan.classList.toggle('selected');
    };
    
    img.addEventListener('click', toggleSelection);
    nameSpan.addEventListener('click', toggleSelection);
  });
}

方式2：按顺序配对（适合无统一父容器的场景）

如果图片和名字元素是按顺序一一对应排列的（第n个图片对应第n个名字），可以通过索引直接配对：

function selector() {
  const images = document.querySelectorAll('.slotimage');
  const nameSpans = document.querySelectorAll('.charname');
  
  // 先校验数量是否匹配，避免出错
  if (images.length !== nameSpans.length) return;
  
  images.forEach((img, index) => {
    const nameSpan = nameSpans[index];
    
    const toggleClasses = () => {
      // 遍历当前组的两个元素，统一切换类
      [img, nameSpan].forEach(el => {
        el.classList.toggle('unselected');
        el.classList.toggle('selected');
      });
    };
    
    img.addEventListener('click', toggleClasses);
    nameSpan.addEventListener('click', toggleClasses);
  });
}

简化类切换逻辑 #

原代码中的if判断可以完全简化，classList.toggle()会自动处理类的添加/移除，不需要手动判断当前类状态，逻辑更简洁可靠。

内容的提问来源于stack exchange，提问作者Mezio Nemo Pleo