Question

我有一个带有以下项目的导航栏

<li>
  <a href="#" data-parent="1" data-selector="nav a" class="">Blog</a>
</li>
<li>
  <a href="#" data-parent="1" data-selector="nav a" class="">Home</a>
</li>

当我将鼠标悬停在项目上时，相应链接的类别将为hover，就像我将鼠标悬停在Blog上时，列表将是

<li>
  <a href="#" data-parent="1" data-selector="nav a" class="hover">Blog</a>
</li>
<li>
  <a href="#" data-parent="1" data-selector="nav a" class="">Home</a>
</li>

当我单击它时，班级将从hover变为open。

我想听点击事件，以了解点击了<a>和data-selector="nav a"。无论是Blog还是Home，我都想调用一个函数。如果单击带有<a>的{{1}}，并且班级是data-selector="nav a"，我想执行其他任务。

Answer 1

使用document.querySelectorAll('li a')获取所有链接，然后使用forEach，使用link.addEventListener(event, handler)将正确的事件侦听器添加到您的链接中。

您可以使用mouseenter和mouseleave事件，通过链接的hover属性来添加和删除classList类。

您可以使用click事件来处理点击，然后使用link.getAttribute('data-selector')来查询data-selector属性并对其进行处理：

const links = document.querySelectorAll('li a');

links.forEach(link => {
  link.addEventListener('mouseenter', event => {
    if (!link.classList.contains('open')) {
      link.classList.add('hover');
    }
  });
  link.addEventListener('mouseleave', event => {
    link.classList.remove('hover');
  });
  link.addEventListener('click', event => {
    link.classList.remove('hover');
    link.classList.toggle('open');
    const dataSelector = link.getAttribute('data-selector');
    if (dataSelector === 'nav a') {
      console.log('this is a [nav a] link');
    } else {
      console.log('this is NOT a [nav a] link');
    }
  });
});

.hover {
  color: blue;
}
.open {
  color: green;
}

<li>
  <a href="#" data-parent="1" data-selector="nav a">Blog</a>
</li>
<li>
  <a href="#" data-parent="1" data-selector="not nav a">Home</a>
</li>

基于数据选择器属性的JavaScript触发事件

1 个答案: