Блог

У меня есть панель навигации со следующими элементами

 <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> with data-selector="nav a" . Будь то Blog или Home, что бы это ни было, я хочу вызвать единственную функцию. Если щелкнуто <a> с data-selector="nav a" и класс open , я хочу выполнить какую-то другую задачу.

Используйте 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>