1

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

2 回答 2

1

将事件绑定到父元素：

HTML：

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

JavaScript

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

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

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

例子

于 2013-05-14T17:11:10.287 回答
0

您在循环中著名的“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";
    };
}
于 2013-05-14T17:10:37.070 回答