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作为参数，然后执行函数，以便整个事情减少到一行代码？

我是一个自学成才的家伙：D

谢谢！

Answer 1

你可以这样做：

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 2

试试这个：

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 3

你不是“调用相同的函数”，你只需要为页面上的许多元素分配单个函数。我觉得这里没有什么特别的错误。

您可以存储要为此函数分配的所有元素的ID，这会减少代码行数，但没有特定的理由这样做。

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

Answer 4

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

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

如何动态传递元素id并调用javascript函数？

4 个答案: