时间戳

首页 > 解决方案 > 多个 id 和类共享 AddEventListener

javascript - 多个 id 和类共享 AddEventListener

问题描述

我正在尝试做的是将相同的导航栏 ID 和类链接到单个事件侦听器中。这适用于对不同页面具有不同样式的博客。两个 ids/classes 完全相同，具有相似的名称（除了一些小的 css 更改）。任何一组 ids/classes 都可以自己工作（ 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”不是一个函数。但是，如果我删除第一组或第二组 ids/classes，则只有一组有效。

编辑

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

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");
  });
}

标签： javascriptcssecmascript-6

解决方案

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

请在此处查看文档：MDN querySelectorAll

要将事件侦听器添加到您应该使用的所有内容：

openCloseNav.forEach((x) => { x.addEventListener("click", openCloseNavClick)} );

这会将事件侦听器附加到openCloseNav.

推荐阅读