简体   繁体   English

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

[英]Reference Individual Class Elements with 'this'

If I'm looping through different elements with the same class with mouseenter / mouseout events and I'm trying to incorporate the 'this' keyword so the JS only triggers on the element I'm hovering over.如果我使用mouseenter / mouseout事件循环遍历具有相同类的不同元素,并且我试图合并 'this' 关键字,那么 JS 只会在我悬停的元素上触发。 I can't get it to work though.我无法让它工作。

I've stripped out my attempts to use the 'this' keyword to make the code easier to read.我不再尝试使用“this”关键字来使代码更易于阅读。 How do I go about having it so that only the element being hovered over has the mouseenter and then mouseout events applied to it whilst looping through the elements?我该如何处理它,以便只有悬停在上面的元素才会在循环元素时应用mouseentermouseout事件?

I can't use a jQuery solution.我不能使用 jQuery 解决方案。

codepen pen: https://codepen.io/emilychews/pen/mMEEBw代码笔: https ://codepen.io/emilychews/pen/mMEEBw

Code is below:代码如下:

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

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

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

In your two functions, all you need to do is refer to this .在你的两个函数中,你需要做的就是参考this In that context, this refers to the .menu-item event that you are currently hovering over.在这种情况下, this指的是您当前悬停在其上的.menu-item事件。

Note that you'll also probably want to attach a handler for the <a> tag children, or else whenever you hover over them, the script will think you're leaving the <li> , and attempt to change the colours.请注意,您可能还想为<a>标记子项附加一个处理程序,否则每当您将鼠标悬停在它们上方时,脚本就会认为您要离开<li>并尝试更改颜色。

This can be done by checking the toElement and relatedTarget of the event in question, and then checking whether those are the parent <li> element.这可以通过检查有问题的事件的toElementrelatedTarget来完成,然后检查它们是否是父<li>元素。

All up, your code would look like this:总而言之,您的代码将如下所示:

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

Note that the functions themselves don't have to loop through the menu items again ;)请注意,功能本身不必再次遍历菜单项;)

Hope this helps!希望这有帮助! :) :)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM