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

how to pass dynamically the element id and call a javascript function?

本文关键字：id 元素 调用 函数 javascript 何动态 动态      更新时间：2023-09-26

我有如下的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

谢谢!

你不是在"调用相同的函数"，你只是将一个函数分配给页面上的许多元素。我看不出有什么特别的问题。

您可以存储要为该函数赋值的所有元素的id，这将减少代码行数，但没有特别的理由这样做。

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

你可以这样做:

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

最佳实践需要更多的检查/验证，但上述内容应该有所帮助。

试试这个:

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

function doTheJob(id)
{
    document.getElementById(id).onmouseover = leftNavHoverIn
}
doTheJob("imgHowToBuy");
doTheJob("imgNewAddition");
doTheJob("imgMostPopular");
doTheJob("imgOffer");
doTheJob("imgRecentlySold");
相关文章：