如何合并/清理 .querySelector 元素

Posted 2023-03-05

【中文标题】如何合并/清理 .querySelector 元素

【英文标题】：How to consolidate/clean up .querySelector elements

【发布时间】：2021-11-04 06:15:22

【问题描述】：

我有多个相同的功能toggleImage。我将它们全部写在单独的代码行中，它们都运行良好，但我确信有一种更有效的方法来编写它。

我尝试了document.querySelectorAll('#H01Overlay', '#H02Overlay', '#H03Overlay', '#H04Overlay')，但后来我的功能都停止工作了......

function toggleImage()
  document.querySelector('#H01Overlay').classList.toggle('img-hidden');


function toggleImage()
  document.querySelector('#H02Overlay').classList.toggle('img-hidden');


function toggleImage()
  document.querySelector('#H03Overlay').classList.toggle('img-hidden');


function toggleImage()
  document.querySelector('#H04Overlay').classList.toggle('img-hidden');

【问题讨论】：

.querySelector() 和 .querySelectorAll() 期望 one 字符串包含一个或多个 css 选择器。 '#H01Overlay', '#H02Overlay', '#H03Overlay', '#H04Overlay' 是四个单独的字符串（选择器）。让它成为一个，它会工作的。

您能否分享足够多的“minimal reproducible example”html 以便我们重现您的问题？除了使用元素的 id 之外，还有很多方法可以选择元素并实现您想要的，包括利用 DOM 结构使您的 javascript 更加 DRY。

【参考方案1】：

第一：函数名称必须是唯一的。但是您可以将它们组合成一个功能：

function toggleImage()
  document.querySelector('#H01Overlay').classList.toggle('img-hidden');
  document.querySelector('#H02Overlay').classList.toggle('img-hidden');
  document.querySelector('#H03Overlay').classList.toggle('img-hidden');
  document.querySelector('#H04Overlay').classList.toggle('img-hidden');

---

如前所述，您可以在逗号分隔的字符串中使用多个选择器（使用querySelectorAll）。您需要一个循环来切换此选择中每个元素的类。

工作示例：

function toggleImage()
  let elms = document.querySelectorAll('#H01Overlay, #H02Overlay, #H03Overlay, #H04Overlay');
  
  for(i = 0; i < elms.length; i++) 
    elms[i].classList.toggle('img-hidden');
  

.img-hidden 
  display: none;

<div id="H01Overlay">test</div>
<div id="H02Overlay">test</div>
<div id="H03Overlay">test</div>
<div id="H04Overlay">test</div>
<div id="H05Overlay">test</div>

<button type="button" onclick="toggleImage();">toggle</button>

【讨论】：

谢谢你，比伯曼！这个例子是一个巨大的帮助。

【参考方案2】：

querySelectorAll 需要一个参数，但选择器可以是多个。你试过了吗？

document.querySelectorAll('#H01Overlay,#H02Overlay,#H03Overlay,#H04Overlay');