使用“this”引用单个类元素

Question

如果我使用 mouseenter / mouseout 事件循环遍历具有同一类的不同元素，并且我正在尝试合并“this”关键字，因此 JS 仅在我悬停的元素上触发。但我无法让它工作。

我已经取消了使用“this”关键字的尝试，以使代码更易于阅读。我该如何处理它，以便只有被悬停的元素在循环遍历元素时应用mouseenter 和mouseout 事件？

我不能使用 jQuery 解决方案。

codepen 笔：https://codepen.io/emilychews/pen/mMEEBw

代码如下：

JS

// declare variable for the CSS class
var menuItem = document.querySelectorAll('.menu-item');

//loop through CSS class to change background to red
function myMouseEnter() {
  for (i = 0; i < menuItem.length; i++) {
  menuItem[i].style.background = "red";
  }
}

//loop through CSS class to change remove red background
function myMouseLeave() {
  for (i = 0; i < menuItem.length; i++) {
  menuItem[i].style.background = "none";
  }
}

//event handler to add function on mouseenter
for (j = 0; j < menuItem.length; j++) {
menuItem[j].addEventListener('mouseenter', myMouseEnter, false)
}

//event handler to add function on mouseout
for (k = 0; k < menuItem.length; k++) { menuItem[k].addEventListener('mouseout', myMouseLeave, false)
}

CSS

.menu-item {padding: 10px;
font-family: arial;
}

HTML

<ul class="unclick--menuitems">
  <li class="menu-item"><a href="//google.com">About</a></li>
  <li class="menu-item"><a href="//google.com">Projects</a</li>
  <li class="menu-item"><a href="//google.com">Contact</a></li>
</ul>

Answer 1

在你的两个函数中，你需要做的就是参考this。在这种情况下，this 指的是您当前悬停的 .menu-item 事件。

请注意，您可能还想为 <a> 子标签附加一个处理程序，否则当您将鼠标悬停在它们上时，脚本会认为您离开 <li> ，并尝试更改颜色。

这可以通过检查相关事件的 toElement 和 relatedTarget 来完成，然后检查它们是否是父 <li> 元素。

全部完成，您的代码将如下所示：

// declare variable for the CSS class
var menuItem = document.querySelectorAll('.menu-item');

// loop through CSS class to change background to red
function myMouseEnter() {
  this.style.background = "red";
}

// loop through CSS class to change remove red background
function myMouseLeave() {
  // prevent the 'mouseout' from affecting the <a> children
  var e = event.toElement || event.relatedTarget;
  if (e.parentNode == this || e == this) {
    return;
  }
  this.style.background = "none";
}

// event handler to add function on mouseenter
for (j = 0; j < menuItem.length; j++) {
  menuItem[j].addEventListener('mouseenter', myMouseEnter, false);
}

// event handler to add function on mouseout
for (k = 0; k < menuItem.length; k++) {
  menuItem[k].addEventListener('mouseout', myMouseLeave, false);
}

.menu-item {
  padding: 10px;
  font-family: arial;
}

<ul class="unclick--menuitems">
  <li class="menu-item"><a href="//google.com">About</a></li>
  <li class="menu-item"><a href="//google.com">Projects</a></li>
  <li class="menu-item"><a href="//google.com">Contact</a></li>
</ul>

请注意，函数本身不必再次遍历菜单项；）

希望这会有所帮助！ :)