參考具有'this'的單個類元素

Question

如果我用mouseenter/mouseout事件循環播放具有相同類的不同元素，並且試圖合併'this'關鍵字，以便JS只觸發元素I'徘徊在。儘管如此，我還是無法使用它。

我已經剔除了使用'this'關鍵字來使代碼更易於閱讀的嘗試。我該如何去做，以便只有被鼠標懸停的元素纔有鼠標事件，然後將鼠標移出事件應用於它，同時循環元素？

我無法使用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>

注意函數本身不必通過菜單項循環再次;）

希望這有助於！ :)