이 getElementsByClassName에서 요소에 이벤트를 할당

Question

자바 스크립트 :

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

당신은 유명한 "I"에 문제가있는 모든 항목에 추가 할 루프에서 메서드가 호출 될 때 myArr.length와 같습니다. 다음은이 문제를 해결하는 한 가지 방법입니다.

HTML :

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

ELEM에 대한 참조없이

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]); 
} 

, 당신은 단지

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

Answer 2

바인드 부모 요소에 이벤트 내부 this.id을 사용할 수 있습니다 자바 스크립트

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

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

마우스를 올리면 요소를 얻을 수 e.target를 사용하고 거기 로직을 ​​수행.

EXAMPLE