如何 consolidate/clean up .querySelector 元素

Question

我有多个相同的功能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');
}

Answer 1

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

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

Answer 2

首先： 函数名称必须是唯一的。但您可以将它们合并为一个功能：

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）。您需要一个循环来切换此选择中每个元素的 class。

工作示例：

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>

如何 consolidate/clean up .querySelector 元素

How to consolidate/clean up .querySelector elements

html

javascript

function

jquery-selectors