Question

在网站上我有一个导航栏。当我点击导航栏中的a时，我想要一个新的div（含有内容），其他所有内容都会“隐藏”。我用display: none做到了。在角落里应该有一个“X”来关闭div并使“第一个屏幕”再次出现。

我做了第一部分，但是关闭时遇到了一些问题。这是我的代码：

const about = document.getElementById('li-about');
const work = document.getElementById('li-work');
const contact = document.getElementById('li-contact');

^这些是导航栏中的链接。

const openSlide = (id) => {
document.querySelector('main article#' + id).style.display = 'block';
document.querySelector('header').style.display = 'none';
};

about.addEventListener('click', () => openSlide('about'));
work.addEventListener('click', () => openSlide('work'));
contact.addEventListener('click', () => openSlide('contact'));

这是代码。有用。但是当我想对结束div函数做类似的事情时，它只适用于about，而不是work and contact。

const closeSlide = (id) => {
document.querySelector('main article#' + id).style.display = 'none';
document.querySelector('header').style.display = 'block';
};

const close = document.querySelector('.close');
close.addEventListener('click', () => closeSlide('about'));
close.addEventListener('click', () => closeSlide('work'));
close.addEventListener('click', () => closeSlide('contact'));

你能告诉我为什么吗？控制台中没有错误，我尝试用简单的closeSlide替换console.log函数，但它也不起作用。 JavaScript是否可能仅检测到一个（HTML代码中的第一个）.close div？

Answer 1

JavaScript是否可能只检测到一个（HTML代码中的第一个）.close div？

是的，document.querySelector返回它在DOM中找到的第一个匹配元素。如果要将侦听器添加到页面上的每个.close，请循环遍历document.querySelectorAll返回的NodeList：

const closeList = document.querySelectorAll('.close');
closeList.forEach(element => {
  element.addEventListener('click', () => closeSlide('about'));
  element.addEventListener('click', () => closeSlide('work'));
  element.addEventListener('click', () => closeSlide('contact'));
};

或向包含所有.close元素的元素添加一个侦听器，只有在单击.close时才会执行操作：

document.querySelector('#some-container').addEventListener('click', evt => {
  if (!evt.target.closest('.close')) return;
  closeSlide('about');
  closeSlide('work');
  closeSlide('contact');
});

具有相同类的多个元素上的事件侦听器

1 个答案: