javascript - 将事件分配给 getElementsByClassName 中的元素

Question

Javascript:

var myArr = document.getElementsByClassName('contItm');

for(i=0;i<myArr.length;i++){
    myArr[i].onmouseover = function(){
        document.getElementById(myArr[i].id + 'Mnu').style.display = "inline";
    }
}

HTML:

<ul class="contMnu">
    <li>
        <a href="#" id="reqAcct" class="contItm">Accounts & Access</a>
        <ul id="reqAcctMnu" class="subContMnu" style="background-color:#cdcdcd">
            <li><a href="#" class="tab">Sub1</a></li>
            <li><a href="#" class="tab">sub2</a></li>
        </ul>
    </li>
</ul>

我想要做的基本上是分配一个函数，该函数将接受 href 的 ID 并向其添加“Mnu”以定位下面 ul 的 ID。

如果我在每个元素内部编写此内容，这就是它的显示方式，但我希望它动态添加到具有类名的所有项目中

<a href="#" id="reqAcct" class="contItm" onmouseover="showMnu(this.id)">Accounts & Access</a>

Answer 1

将事件绑定(bind)到父元素:

HTML:

<ul id="contMnu" class="contMnu"> ... </ul>

JavaScript

var menu = document.getElementById("contMnu");

menu.onmouseover = function(e){
    console.log(e.target);
};

使用 e.target 获取鼠标悬停的元素并在那里执行逻辑。

EXAMPLE