如何整合或精简使用.querySelector的重复toggleImage函数代码

问题原因 #

你多次声明同名的toggleImage函数，后者会直接覆盖前者的定义，实际运行时只有最后一个控制#H04Overlay的函数会生效，你当前觉得功能正常属于巧合，本身写法存在逻辑漏洞。
你之前用document.querySelectorAll优化后失效的原因也很简单：该方法返回的是包含多个DOM元素的NodeList类数组对象，只有单个DOM元素才有classList属性，直接对NodeList调用classList会抛出错误导致功能失效。

优化方案 #

分两种常见使用场景选择即可：

场景1：不同触发按钮分别控制对应Overlay的显隐

给所有触发切换的按钮加统一自定义属性data-toggle-target，属性值为对应要控制的Overlay选择器，只需要绑定一次全局事件即可实现所有切换需求，后续新增同类切换需求也不需要新增JS代码：

// 全局绑定切换事件
document.addEventListener('click', function(e) {
  // 判断点击元素是否为切换触发器
  const targetSelector = e.target.dataset.toggleTarget;
  if (!targetSelector) return;
  // 切换对应元素的类
  document.querySelector(targetSelector)?.classList.toggle('img-hidden');
});

对应的触发按钮HTML写法示例：

<button data-toggle-target="#H01Overlay">切换H01图片</button>
<button data-toggle-target="#H02Overlay">切换H02图片</button>
<button data-toggle-target="#H03Overlay">切换H03图片</button>
<button data-toggle-target="#H04Overlay">切换H04图片</button>

场景2：单个触发按钮同时切换所有四个Overlay的显隐

直接遍历querySelectorAll返回的所有元素，逐个修改类即可：

function toggleAllImages() {
  document.querySelectorAll('#H01Overlay, #H02Overlay, #H03Overlay, #H04Overlay').forEach(overlay => {
    overlay.classList.toggle('img-hidden');
  });
}

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