我正在处理一些我从其他人手中接过的HTML和Javascript代码.该页面每十秒重新加载一个数据表(通过异步请求),然后使用一些DOM代码重新构建表.有问题的代码看起来像这样:
var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
var td = document.createElement('td');
var select = document.createElement('select');
select.setAttribute("...", "...");
select.onchange = function() {
onStatusChanged(select, callid, anotherid);
};
td.appendChild(select);
}
Run Code Online (Sandbox Code Playgroud)
但是当onchange为一个<select>元素触发事件时,似乎将相同的值传递给表中每个表的onStatusChanged()方法<select>(我已经在循环的每次迭代中验证了,callid并且anotherid被赋予了新的,不同的值).
我怀疑这是因为我使用select.onchange = function()语法设置事件处理程序的性质.如果我理解这是如何正常工作的,那么这个语法将onchange事件的闭包设置为一个函数,该函数引用这两个引用,最终得到它们在循环的最后一次迭代中设置的最终值.触发事件时,由callid和引用anotherid的值是最后一次迭代中设置的值,而不是在单个迭代中设置的值.
有没有办法可以复制我传递给的参数的值onStatusChanged()?
我更改了标题以更好地反映问题和接受的答案.
我在闭包上阅读Mozilla开发者的网站,我在他们的例子中注意到常见的错误,他们有这样的代码:
<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>
Run Code Online (Sandbox Code Playgroud)
和
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
} …Run Code Online (Sandbox Code Playgroud)