Question

一旦页面加载，如果你检查控制台，你会看到该功能在鼠标悬停元素之前触发。如果我删除参数，那么页面等待我鼠标悬停元素，但我失去了动态功能。传递元素我做错了吗？

var myList = ["hoverOne", "hoverTwo"];
for(var i=0; i < myList.length; i++){
    document.getElementById(myList[i]).onmouseover=changeImage(myList[i]+"Image");
}
function changeImage(thisDiv){
    console.log(thisDiv);
    //show/hide code here
}

这是我正在玩的小提琴的链接：http://jsfiddle.net/QtG9P/33/

Answer 1

如果你想保持i的值，试试这样：

var myList = ["hoverOne", "hoverTwo"];
for(var i=0; i < myList.length; i++){
    (function(i){
        document.getElementById(myList[i]).onmouseover = function(){
            changeImage(myList[i]+"Image");
        };
    })(i);
}

在这里看到它：

http://jsfiddle.net/QtG9P/36/

Answer 2

您正在调用该函数并将返回值分配给事件属性。您需要在函数表达式中包装函数调用，以便获得可以分配给属性的函数。

此外，您需要为每次迭代制作变量i的副本，否则事件处理程序将使用循环后i所具有的值。您可以通过将代码中的代码包装在一个立即执行的函数表达式中来实现：

for(var i=0; i < myList.length; i++){
  (function(i){
    document.getElementById(myList[i]).onmouseover = function(){
      changeImage(myList[i]+"Image");
    };
  })(i);
}

Answer 3

更改您的代码，如;

myList = ["hoverOne", "hoverTwo"];
for(var i=0; i < myList.length; i++){
    document.getElementById(myList[i]).onmouseover=function (evnt) { changeImage(evnt.srcElement.id); };
}
function changeImage(thisDiv){
    console.log(thisDiv + "Image");
    //show/hide code here
}

jsfiddle link

onmouseover函数自动运行参数

3 个答案: