Question

我想做的是将相同的导航栏ID和类链接到单个事件侦听器中。这是针对不同页面具有不同样式的博客。这两个id / classs完全相同，但名称相似（除了一些小的css更改）。两组ID /类都可以独立工作（menuNav或menuNav-c）。复制，粘贴相同的代码，然后更改变量，函数并在末尾添加“ -c”也不起作用，这自然是多余的代码。任何帮助表示赞赏。

let openCloseNav = document.querySelectorAll("#openCloseNav", "#openCloseNav-c");
let menuNav = document.querySelectorAll("#menuNav", "#menuNav-c");

openCloseNav.addEventListener("click", openCloseNavClick);

function openCloseNavClick() {
  openCloseNav.classList.toggle("toggle toggle-c");
  menuNav.classList.toggle("navOpen navOpen-c");
}

控制台调出“ openCloseNav”不是一个功能。但是，如果我删除第一组或第二组ID /类，则只有一组有效。

编辑

我已经开始工作了，谢谢大家的帮助。经过更多的挖掘和修补后，这一切都变得更加有意义。对于那些可能遇到类似问题的人，这对我有用：

let firstMenuToggle = document.querySelectorAll("#openCloseNav");
let firstMenu = document.querySelectorAll("#menuNav");

for (let i = 0; i < firstMenuToggle.length; i++) {
  firstMenuToggle[i].addEventListener("click", function() {
    firstMenuToggle[i].classList.toggle("toggle");
    firstMenu[i].classList.toggle("navOpen");
  });
}

let secondMenuToggle = document.querySelectorAll("#openCloseNav-c");
let secondMenu = document.querySelectorAll("#menuNav-c");

for (let i = 0; i < secondMenuToggle.length; i++) {
  secondMenuToggle[i].addEventListener("click", function() {
    secondMenuToggle[i].classList.toggle("toggle-c");
    secondMenu[i].classList.toggle("navOpen-c");
  });
}

Answer 1

C返回与指定选择器组匹配的文档元素列表。

请在此处查看文档：{{3}}

要将事件监听器添加到所有应使用的内容中：

querySelectorAll

这会将事件侦听器附加到openCloseNav.forEach((x) => { x.addEventListener("click", openCloseNavClick)} );中所有匹配文档的元素上。

多个ID和类共享AddEventListener

1 个答案: