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。

如果我在每个元素中写这个，这就是它的显示方式，但我希望它能动态地添加到所有带有classname的项目

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

Answer 1

将事件绑定到父元素：

<强> HTML ：

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

<强>的JavaScript

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

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

使用e.target获取moused的元素并在那里执行逻辑。

EXAMPLE

Answer 2

循环中有着名的“i”有问题，调用方法时它将等于myArr.length。以下是解决问题的方法之一。

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

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

如果没有引用elem，你可以在

中使用this.id

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

将事件分配给getElementsByClassName中的元素

2 个答案: