Javascript 需要帮助将单个数组值传递给动态创建元素上的附加函数吗

我无法将数组的值放入动态创建的元素上添加的事件的函数调用中

这是一个硬编码的版本，可以很好地工作：

var parent_item = document.getElementById("developers_container");

var part = document.createElement('div');
part.id = "developer_A";
part.name = "developer_A";
part.className = "developer_block_un";
part.onmouseover = function() { hilight_dev('A',true)};
part.onmouseout = function() { hilight_dev('A',false)};
parent_item.appendChild(part);

var parent_item = document.getElementById("developer_A");

var part = document.createElement('span');
part.id = "developer_title_A";
part.name = "developer_title_A";
part.className = "developer_un";
part.innerHTML = "John Doe";
part.onclick = function() { select_dev('A')};
parent_item.appendChild(part);

基本上，这就是创建一个用户列表以供选择。每个用户的列表都有mouseover、mouseoff和onclick事件。上述代码的内容目前正在为每个用户复制

我想用基于阵列的函数替换复制：

var dev_id = new Array();
var dev_fn = new Array();
var dev_ln = new Array();

document.getElementById("developers_container").innerHTML = "";

dev_id[0] = "A";
dev_fn[0] = "John";
dev_ln[0] = "Doe";

dev_id[1] = "B";
dev_fn[1] = "John";
dev_ln[1] = "Smith";

dev_id[2] = "C";
dev_fn[2] = "John";
dev_ln[2] = "Jones";

dev_id[3] = "D";
dev_fn[3] = "John";
dev_ln[3] = "Yougetthepoint";

document.getElementById("developers_container").innerHTML = "";

for(var i = 0; i < dev_id.length; i++) 
{
    var parent_item = document.getElementById("developers_container");

    var part = document.createElement('div');
    part.id = "developer_"+dev_id[i];
    part.name = "developer_"+dev_id[i];
    part.className = "developer_block_un";
    part.onmouseover = function() { hilight_dev(dev_id[i],true)};
    part.onmouseout = function() { hilight_dev(dev_id[i],false)};
    parent_item.appendChild(part);

    var parent_item = document.getElementById("developer_"+dev_id[i]);

    var part = document.createElement('span');
    part.id = "developer_title_"+dev_id[i];
    part.name = "developer_title_"+dev_id[i];
    part.className = "developer_un";
    part.innerHTML = dev_fn[i]+"<BR>"+dev_ln[i];
    part.onclick = function() { select_dev(dev_id[i])};
    parent_item.appendChild(part);
}

var dev_id=new Array（）；
var dev_fn=新数组（）；
var dev_ln=新数组（）；
document.getElementById（“开发者容器”）.innerHTML=“”；
开发id[0]=“A”；
dev_fn[0]=“John”；
dev_ln[0]=“Doe”；
开发id[1]=“B”；
dev_fn[1]=“John”；
dev_ln[1]=“Smith”；
开发id[2]=“C”；
dev_fn[2]=“John”；
dev_ln[2]=“Jones”；
dev_id[3]=“D”；
dev_fn[3]=“John”；
dev_ln[3]=“Yougetthepoint”；
document.getElementById（“开发者容器”）.innerHTML=“”；
对于（var i=0；i”+dev_ln[i]；
part.onclick=function（）{select_dev（dev_id[i]）；
父项\子项（部分）；
}

除了添加的事件外，这一切都很正常。在函数代码中使用“dev_id[i]”（如“part.onmouseover=function（）{hilight_dev（dev_id[i]，true）}；”）时，它似乎没有做任何事情。事件触发并调用函数，但传递的变量是“未定义”的，而不是用户的id

我希望这里有人知道如何让它工作。谷歌搜索并不是很有帮助，这是我花了半天时间试图解决的那些愚蠢的小问题之一。非常感谢您的任何帮助

谢谢

在调用函数时，循环中的变量i是未定义的，需要在其上形成闭包以保持其值。请参阅Douglas Crockford的“JavaScript，好的部分”，以了解有关这方面的详细说明

---

呃。。在尼尔的评论之后。。对我不是没有定义的。。它将始终是dev_id的长度。。无论如何，这不是OP想要的：）

你应该考虑使用HTML5“数据”属性。这将使这一切变得容易得多。您可以向div添加任意多个“data-”属性，并完全避免所有这些数组业务。它不是未定义的。在示例代码中，它总是

dev_id.length

。代码中的i是数组项的索引。它从0迭代到数组的长度。

part.onmouseover = function(i) { 
  return function() { hilight_dev(dev_id[i],true) }
}(i)