Question

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

所以这里的硬编码版本运行得很好：

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

除了增加的事件外，其中每一点都运行得很好。在函数代码中使用“dev_id [i]”的地方（如“part.onmouseover = function（）{hilight_dev（dev_id [i]，true）};”），它似乎没有做任何事情。事件将触发并调用函数，但正在传递的变量将以“未定义”而不是该用户的id来传递。

我希望有人知道如何让这个工作。谷歌搜索不是很有帮助，这是一个愚蠢的小问题，花了我半天试图弄明白。非常感谢任何和所有帮助。

由于

Answer 1


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

在调用函数时，循环中的变量i是未定义的，您需要在其上形成一个闭包以保持它的值。有关此

的详细说明，请参阅Douglas Crockford的“JavaScript，the Good Parts”

Err ..在Neil的评论之后..是的...我没有未定义..它将永远是dev_id的长度..在任何情况下，它都不是op想要的：）

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

1 个答案: