基於數據選擇器屬性的Javascript觸發事件

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 。

我想收聽 click 事件以知道點擊了帶有data-selector="nav a" <a> 。 無論是博客還是主頁，我都想調用一個函數。 如果<a> with data-selector="nav a"被點擊並且類是open我想做一些其他的任務。

Answer 1

使用document.querySelectorAll('li a')獲取所有鏈接，然后使用forEach ，使用link.addEventListener(event, handler)將適當的事件偵聽器添加到您的鏈接中。

您可以使用mouseenter和mouseleave事件使用鏈接的classList屬性添加和刪除hover類。

你可以使用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>