從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

您有著名的「我」的問題在循環中，當方法被調用時它將等於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"; 
    }; 
} 

Answer 2

綁定的事件父元素：

HTML：

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

JavaScript

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

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

使用e.target來獲取鼠標懸停到元素，做你的邏輯在那裏。

EXAMPLE