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来解决这个问题：

＆＃13;

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

＆＃13;

<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>

＆＃13;

不再需要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);
  });
}

JavaScript mouseover和mouseleave事件

3 个答案: