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

马尔茨89

在网站上,我有一个导航栏。当我单击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代码中的第一个).closediv?

辅助炸玉米饼

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在单击a后才起作用:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将事件侦听器绑定到具有相同类的多个元素

将Click事件侦听器添加到具有相同类的元素

将事件侦听器添加到容器中具有相同类的多个 div

如何将事件侦听器添加到具有相同类的多个输入中

jQuery DataTables的on()事件侦听器,具有多个事件

具有相同功能的多个事件侦听器存储单独的局部变量?

如何在 JQuery 中为动态创建的具有相同类名的链接添加事件侦听器?

具有相同类的多个按钮的单击事件上的Javascript

具有相同类的多个按钮上的jQuery按钮事件

具有不同触发器元素和侦听器元素的自定义事件

检查元素是否具有事件侦听器。没有jQuery

从单个事件侦听器控制多个元素

在动态创建的元素上添加事件侦听器

HTML元素列表上的事件侦听器

JS:隐藏元素上的事件侦听器

数组元素上的简洁事件侦听器

在全局事件上处理多个侦听器

以编程方式将单个事件侦听器添加到多个 div 会导致所有受影响的 div 上出现相同的函数

未为所有元素附加事件侦听器

for循环中有多个不同的事件侦听器

如何使用Jquery检查Rails中具有相同类名的多个元素中的on change事件

在具有相同类的多个输入文本上触发 keyup 事件

具有多个侦听器的全局流

具有多个回复模板的 Kafka 侦听器容器

如何在一个元素中添加多个带有选择器的事件侦听器?

如何在具有相同类的多个按钮的单击事件上使用Javascript添加多个相同的ID

如何将 scaleUp 类添加到 onmouseover 事件侦听器上的多个跨度元素

为多个元素添加事件侦听器并检测哪个元素触发事件 - jQuery

具有相同类输入的JavaScript多个事件处理程序