2

我试图通过读取包含可变数量对象的 xml 来减少网页上的代码大小。在 javascript 代码中，我创建了一个数组来保存每个对象并循环通过 xml 数据来创建每个对象。

我循环遍历 xml 节点的数量以创建那么多对象和对象函数（鼠标悬停、onclick 等），但在函数中我使用相同的索引变量来访问当前对象属性，但是当函数实际被调用时该索引变量不再在我的范围内。

无论如何我可以获得调用对象的键（索引）值吗？

for(index=0, index < scenes.length; index+=1)
{
 this.thumbs[index] = document.createElement('div');
//setup more properites
this.thumbs_image[index] = document.createElement('img');
//more setup
this.thumbs[index].onmouseover = function(){
me.thumbs_image[index].src = scenes[index].attributes.getNamedItem("src").nodeValue;     //THIS IS THE PROBLEM - WHEN the function is actually called index is no longer the correct index of the array element
}
}

函数 onmouseover 之外的代码可以工作，如果我在 onmouseover 内对索引进行硬编码，它就可以工作。

我尝试使用作为参数传递的索引创建一个单独的函数，但是当我动态分配函数时，我仍然使用索引分配，因为我想不出另一种方式，这也不起作用：

this.thumb[index].onmouseover = myFunction(index);

myFunction=function(i){
me.thumbs_image[i].src = scenes[i].attributes.getNamedItem("src").nodeValue;
}

onmouseover 中是否有任何方法可以获取调用它的元素的键？

我希望有一个我只是忽略的明显解决方案 - 非常感谢任何帮助！

谢谢！

4

1 回答 1

0

第一个解决方案：替换这个：

this.thumbs[index].onmouseover = function(){
  me.thumbs_image[index].src = scenes[index].attributes.getNamedItem("src").nodeValue;
}

有了这个：

this.thumbs[index].onmouseover = (function(i) {
  return function() {
    me.thumbs_image[index].src = scenes[index].attributes.getNamedItem("src").nodeValue;
  };
})(i);

函数包装器将在闭包中捕获变量的值i，以便您可以i在调用处理程序时访问该值（而不是不存在的变量）。

第二种解决方案：（ onmouseover和所有其他事件处理程序）将接收一个参数，即事件。该事件知道它的起源。尝试这个：

this.thumbs[index].onmouseover = function(evt) {
  console.log(evt.target);
}

在这种特殊情况下，我推荐第二种解决方案，但第一种解决方案中的模式很重要 - 永远不要在循环中直接创建依赖于循环计数器的函数，而是始终使用函数调用来捕获循环计数器的值.

于 2012-12-03T02:28:51.717 回答