javascript - 如何解决 - 单击某些按钮时不切换类

Question

有 2 个具有不同 ID 的按钮。单击任一选项时，应在所需选择器上切换类。问题 - 只有一个按钮 ID 按预期工作。

document.querySelector("#abc,#xyz").addEventListener("click", function() {
  var e = document.querySelectorAll(".dog,.cat, #abc, #xyz");
  for (var i = 0; i < e.length; i++) {
    e[i].classList.toggle("red");
  }
});

期望看到 - 当点击button#abc或button#xyz时，红色类应该应用于.dog、.cat、#abc、#xyz

Answer 1

querySelector方法仅返回第一个匹配的元素，在获取按钮时使用querySelectorAll代替

/** use querySelectorAll to get all the elements not only the first matched one **/
/** use forEach method to loop through the returned NodeList object **/

document.querySelectorAll("#abc, #xyz").forEach(btn => {
  btn.addEventListener("click", () => {
    const e = document.querySelectorAll(".dog,.cat, #abc, #xyz");
    e.forEach(el => {
      el.classList.toggle("red");
    });
  });
})

.red {
  background-color: #f00;
}

<button id="abc">abc</button>
<button id="xyz">xyz</button>
<div class="dog">dog</div>
<div class="cat">cat</div>