querySelectorAll和具有相同类的多个元素
提问于 2020-01-20 01:15:43
当您单击具有应用于它们的同一个类的链接时，我目前正在尝试将这个演示用于页面转换。
我不知道如何为在使用querySelectorAll之后具有相同类的所有元素调整下面的代码。您认为应该如何调整才能使其与querySelectorAll和具有同一个类的多个元素一起工作？
(function() {
const elmHamburger = document.querySelector('.link-with-overlay');
const elmOverlay = document.querySelector('.shape-overlays');
const overlay = new ShapeOverlays(elmOverlay);
elmHamburger.addEventListener('click', () => {
if (overlay.isAnimating) {
return false;
}
overlay.toggle();
if (overlay.isOpened === true) {
elmHamburger.classList.add('is-opened-navi');
} else {
elmHamburger.classList.remove('is-opened-navi');
}谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-20 01:31:28
要允许所有链接都有onclick事件，您需要迭代querySelectorAll方法返回的querySelectorAll。
注意:您不能在NodeList.forEach中使用IE11，所以您需要在迭代之前将其填充或转换为真正的JS数组。
(function() {
const elmHamburgers = document.querySelectorAll('.link-with-overlay');
const elmOverlay = document.querySelector('.shape-overlays');
const overlay = new ShapeOverlays(elmOverlay);
const onHamburgerClick = function() {
if (overlay.isAnimating) {
return false;
}
overlay.toggle();
if (overlay.isOpened === true) {
this.classList.add('is-opened-navi');
} else {
this.classList.remove('is-opened-navi');
}
};
// Iterates over all of the elements matched with class .link-with-overlay and
// adds an onclick event listener
elmHamburgers.forEach(elem => elem.addEventListener('click', onHamburgerClick));
})();您还可以使用if (overlay.isOpened === true) {...将条件：this.classList替换为一行
this.classList.toggle('is-opened-navi', overlay.isOpened)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59820079
复制
腾讯云开发者
