JavaScript mouseover 和 mouseleave 事件

Question

我在相同的元素上有一个 mouseover 和 mouseleave 事件监听器，当您 mouseover 时，它会添加一个类和 mouseleave 删除该类。

我正在运行forEach，以便当您将鼠标悬停特定项目时，它会显示该项目的特定文本 block 。这就是为什么我使用 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") });
    });