Question

我有一个带12个按钮的div。每个人都有mouseenter（）的eventListeners。当用户将鼠标悬停在某个按钮上时，其他11个按钮会淡出。我有足够的代码让您流血。但是我很难将所有内容整合到一个函数中，而仅使用event.target。

我可以掌握基础知识，但是在插入for循环（我认为需要继续）时会遇到问题，以淡出其他每个按钮，但不包括悬停的按钮（我的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>

希望有帮助！

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

1 个答案: