JavaScript mouseover and mouseleave event

Question

我在相同的元素上具有mouseover和mouseleave侦听器，当您 mouseover时，添加了一个类，mouseleave删除了类。

我正在运行forEach，因此当您mouseover特定项目时，它显示了该项目的特定文本块。这就是为什么我使用JS而不是普通CSS。

我正在寻找一种优化以下代码的方法。

const pageNavRings = document.querySelectorAll('.page-nav-ring')
pageNavRings.forEach((pageRing) => {
  pageRing.addEventListener('mouseover', (e) => {
    const pageRingParent = e.target.closest('.page-nav__list--item')
    pageRingParent.querySelector('.page-nav-label').classList.add('is-visible')
  })
  pageRing.addEventListener('mouseleave', (e) => {
    const pageRingParent = e.target.closest('.page-nav__list--item')
    pageRingParent.querySelector('.page-nav-label').classList.remove('is-visible')
  })
})

似乎可以编写更好，更 dry 。所有的帮助将不胜感激。

Answer 1

我试图使其更紧凑和清晰的尝试。不确定您的HTML，因此使用parentElement获取标签。

    const rings = document.querySelectorAll('.page-nav-ring')
    rings.forEach((ring) => {
        const label = ring.parentElement.querySelector('.page-nav-label');
        ring.addEventListener('mouseover', () => { label.classList.add("is-visible") });
        ring.addEventListener('mouseleave', () => { label.classList.remove("is-visible") });
    });

Answer 2

我会在不使用JavaScript但CSS的情况下解决此问题：

.page-nav-ring > .page-nav__list--item {
   opacity: 1;
}
.page-nav-ring > .page-nav__list--item:hover {
   opacity: 0.1;
}

<ul class="page-nav-ring">
  <li class="page-nav__list--item">Hello World</li>
  <li class="page-nav__list--item">Hello World 2</li>
  <li class="page-nav__list--item">Hello World 3</li>
</ul>

不再需要JS。当然，您可以将opacity属性更改为所需的属性。

Answer 3

const pageNavRings = document.querySelectorAll('.page-nav-ring')
pageNavRings.forEach(pageRing => {
  // Move everything into `handler` function
  // to make use of scoping (you will see why later)
  pageRing.addEventListener('mouseover', handler);
})
function handler(e){
  // Cache these values using variable
  const className = 'is-visible';
  const pageRingParent = e.target.closest('.page-nav__list--item')
  const pageRingLabel = pageRingParent.querySelector('.page-nav-label');
  pageRingLabel.classList.add(className);
  // Add `mouseleave` event listener in this handler is fine
  // Because it doesn't need to listen to this event
  // before everything started anyway
  this.addEventListener('mouseleave', e => {
    // Using the values from the const above,
    // You don't have to use `e.target.closest` and `querySelector` again
    pageRingLabel.classList.remove(className);
  });
}