'this'を持つ個々のクラス要素を参照

Question

mouseenter/mouseoutイベントで同じクラスの別の要素をループしているときに、JSが要素上でトリガするように 'this'キーワードを組み込もうとしていると、ホバリングします。私はそれを動作させることはできません。

コードを読みやすくするために '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

あなたの2つの機能では、あなたがする必要があるのは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>

注;）

・ホープこれは役に立ちます！ :)