동적으로 요소 id를 전달하고 javascript 함수를 호출하는 방법은 무엇입니까?

Question

나는 자바 스크립트 코드를 아래와 같이가 -

은

function initPage(){ 

    // Left Navigation Pane - moverOver effect: 
    document.getElementById("imgHowToBuy").onmouseover = leftNavHoverIn; 
    document.getElementById("imgNewAddition").onmouseover = leftNavHoverIn; 
    document.getElementById("imgMostPopular").onmouseover = leftNavHoverIn; 
    document.getElementById("imgOffer").onmouseover = leftNavHoverIn; 
    document.getElementById("imgRecentlySold").onmouseover = leftNavHoverIn; 
..... 
} 

기본적으로 내 코드 (함수가 호출되는 아름답게 실행) 작동합니다. 그러나 나는 여기에서 모범 사례의 원칙을 사용하고 있다고 생각하지 않는다. 동일한 기능을 계속 호출하는 것은 조금 이상합니다. 어떻게 든 인수로 요소의 ID를 전달한 다음 함수를 실행하면이 모든 것이 코드 한 줄로 줄어들 수 있습니까?

나는 스스로 가르쳐 준 남자 야. D

고마워!

Answer 1

당신은 "같은 함수를 호출"아니에요, 당신은 단순히 페이지의 요소를 많이 단일 기능을 할당하고 있습니다. 여기에 특별히 잘못된 것은 없습니다.

이 함수를 할당 할 모든 요소의 ID를 저장할 수 있습니다. 이렇게하면 코드 행 수가 줄어들지 만 구체적인 이유는 없습니다.

var leftNavElements = ["imgHowToBuy","imgNewAddition"]; // etc.... 
for(var i=0;i<leftNavElements.length;i++){ 
    document.getElementById(leftNavElements[i]).onmouseover = leftNavHoverIn; 
} 

Answer 2

이 같은 것을 할 수있는 :

function assignMouseOver(elem) { 
    document.getElementById(elem).onmouseover = leftNavHoverIn; 
} 

assignMouseOver("imgHowToBuy"); // etc 

또한 (표시) 한 줄의 코드로 줄일 수있는 함수 내부의 배열을 배열 및 루프 등의 요소 ID를 전달할 수를 :

function assignMouseOver(elems) { 
    if (elems.length>0) { 
    for (var i=0; i<elems.length; i++) { 
    document.getElementById(elems[i]).onmouseouver = leftNavHoverIn; 
    } 
    } 
} 

assignMouseOver(["imgHowtoBuy","etc","etc"]); 

모범 사례에는 확인/확인이 더 필요할 수 있지만 위의 내용이 도움이됩니다.

Answer 3

이 시도 :

var ids = ["imgHowToBuy", "imgNewAddition", "imgMostPopular", "imgOffer", "imgRecentlySold"] 

var setMouseover = function (id) { 
    document.getElementById(id).onmouseover = leftNavHoverIn; 
}; 

for(var i=0;i<ids.length;i++) { 
    setMouseover(ids[i]); 
} 

Answer 4

function doTheJob(id) 
{ 
    document.getElementById(id).onmouseover = leftNavHoverIn 
} 

doTheJob("imgHowToBuy"); 
doTheJob("imgNewAddition"); 
doTheJob("imgMostPopular"); 
doTheJob("imgOffer"); 
doTheJob("imgRecentlySold");