为导航栏中的所有链接选择并添加功能

Question

我正在尝试添加一个功能，以所有的链接在我的导航，将延迟链接到下一页，而菜单使用javascript关闭。

这是我的javascript，我知道querySelector部分是错误的，但我不确定如何修复它;

document.querySelector(".nav-link-close").addEventListener("click", function (e) {
e.preventDefault();
console.log(e.target.href)
toggleNav(false);
setTimeout(() => {
const nextPage = e.target.href;
window.location.href = nextPage;
}, 1000)
});

提前感谢任何愿意帮忙的人。

Answer 1

querySelector将获得第一个具有nav-link-close类的元素，因此您需要使用querySelectorAll并循环遍历元素并添加事件。

const elements = document.querySelectorAll(".nav-link-close")
elements.forEach(element => {
element.addEventListener("click", function (e) {
e.preventDefault();
console.log(e.target.href)
toggleNav(false);
setTimeout(() => {
const nextPage = e.target.href;
window.location.href = nextPage;
}, 1000)
});
})

Answer 2

当您想要选择一个类的所有元素时，使用querySelectorAll。您还必须循环遍历每个元素，以便向每个元素添加事件侦听器。

document.querySelectorAll(".nav-link-close").forEach( el => {
el.addEventListener("click", function (e) {
e.preventDefault();
console.log(e.target.href)
toggleNav(false);
setTimeout(() => {
const nextPage = e.target.href;
window.location.href = nextPage;
}, 1000)
});
});