javascript - 如何利用 event.target 将 JS 函数合并为一个函数？

Question

我有一个带有 12 个按钮的 div。每个都有 mouseenter() 的事件监听器。当用户滑过某个按钮时，其他 11 个按钮就会淡出。我有足够的代码让你流血。但我无法将其全部整合到一个函数中，并且仅使用 event.target。

我可以掌握基础知识，但在插入 for 循环(我相信需要 continue)来淡出其他每个按钮时遇到问题，不包括悬停在其上的按钮(我的 event.target元素)。您可以在我的代码中看到，目前我为其他每个按钮都有一行代码，用于在它们上运行不透明度淡入循环。如何将其合并为一个函数？

这是我每次滚动按钮时运行的代码:

function fadeOut01() {
var op = 1;  // initial opacity
var timer = setInterval(function () {
    if (op <= 0.1){
        clearInterval(timer);
    }
    box02.style.opacity = op;
    box03.style.opacity = op;
    box04.style.opacity = op;
    box05.style.opacity = op;
    box06.style.opacity = op;
    box07.style.opacity = op;
    box08.style.opacity = op;
    box09.style.opacity = op;
    box10.style.opacity = op;
    box11.style.opacity = op;
    box12.style.opacity = op;
    op -= op * 0.1;
}, 20);
}

这是我定义框的 html:

<a href="ffvideo.html"><div id="grid01" class="grids"><div class="gridText">video</div></div></a>
        <a href="ffbroadcast.html"><div id="grid02" class="grids"><div class="gridText">broadcast</div></div></a>
        <a href="ffgraphics.html"><div id="grid03" class="grids"><div class="gridText">graphics</div></div></a>
        <a href="ffsignage.html"><div id="grid04" class="grids"><div class="gridText">digital signage</div></div></a>
        <div id="grid05" class="grids"><div class="gridText">3d</div></div>
        <div id="grid06" class="grids"><div class="gridText">virtual sets</div></div>
        <div id="grid07" class="grids"><div class="gridText">print</div></div>
        <div id="grid08" class="grids"><div class="gridText">technical direction</div></div>
        <div id="grid09" class="grids"><div class="gridText">live events</div></div>
        <div id="grid10" class="grids"><div class="gridText">photography</div></div>
        <div id="grid11" class="grids"><div class="gridText">workflow automation</div></div>
        <a href="fflogos.html"><div id="grid12" class="grids"><div class="gridText">our clients</div></div></a>

Answer 1

如果我正确理解您的问题，这应该可以通过以下方式解决 - 请参阅下面的评论以获取有关其工作原理的上下文信息:

/* Query all grids of the grid-wrapper and apply same hover behavior to each */
document.querySelectorAll('.grid-wrapper .grids').forEach(function(element) {

  /* Get the grid wrapper that encloses the grid element */
  const gridWrapper = document.querySelector('.grid-wrapper');

  /* Add mouse over event and add hover classes for both the wrapper and 
  grid elements */
  element.addEventListener('mouseover', function() {

    element.classList.add('hover');
    gridWrapper.classList.add('hover');
  });

  /* Add mouse out event and remove hover classes for both the wrapper and 
  grid elements */
  element.addEventListener('mouseout', function() {

    element.classList.remove('hover');
    gridWrapper.classList.remove('hover');
  });

});

.grid-wrapper .grids {
  
  /* Set default opacity for grid-wrapper grids */
  opacity: 1;
  
  /* Specifcy the transition behavior for opacity property of .grids.
  Transition will take .35s and be delayed by .1s to reduce flickering 
  when moving quickly between grids */
  transition: opacity 0.35s linear 0.1s;
  
  /* Extra styles just added for presentation */
  display: inline-block;
  width: 150px;
  height: 100px;
  background: grey;
  margin: 10px;
}

/* When .hover modifier class is applied to the wrapper, cause the 
children (.grids) to fade out by default (we'll prevent/override this
default behavior for the actual grid child being hovered to achieve 
the desired final result) */
.grid-wrapper.hover .grids {
  opacity: 0.1;
}

/* Override the default grid-wrapper hover for the actual grid being
hovered to ensure
that it is still visible */
.grid-wrapper.hover .grids.hover {
  opacity: 1
}

<div class="grid-wrapper">
  <div id="grid01" class="grids">
    <div class="gridText">video</div>
  </div>
  <div id="grid02" class="grids">
    <div class="gridText">broadcast</div>
  </div>
  <div id="grid03" class="grids">
    <div class="gridText">graphics</div>
  </div>
  <div id="grid04" class="grids">
    <div class="gridText">digital signage</div>
  </div>
  <div id="grid05" class="grids">
    <div class="gridText">3d</div>
  </div>
  <div id="grid06" class="grids">
    <div class="gridText">virtual sets</div>
  </div>
  <div id="grid07" class="grids">
    <div class="gridText">print</div>
  </div>
  <div id="grid08" class="grids">
    <div class="gridText">technical direction</div>
  </div>
  <div id="grid09" class="grids">
    <div class="gridText">live events</div>
  </div>
  <div id="grid10" class="grids">
    <div class="gridText">photography</div>
  </div>
  <div id="grid11" class="grids">
    <div class="gridText">workflow automation</div>
  </div>
  <div id="grid12" class="grids">
    <div class="gridText">our clients</div>
  </div>
</div>

希望有帮助!