如何動態傳遞元素id並調用javascript函數？

Question

我有類似下面的JavaScript代碼 -

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作爲參數，然後執行該函數，以便將整個事物簡化爲一行代碼？

我是一個自學js的傢伙：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");