我试图在 onclick 事件处理函数中获取一个对象。
但它没有按我预期的方式工作。
例如,如果我运行这段代码:
var entries = [{id: 1},{id: 2},{id: 3}];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
document.getElementById(entry.id).onclick = function () {
console.log("this.id: " + this.id);
console.log("entry.id: " + entry.id);
};
}
我期望的是:
this.id: 1
entry.id: 1
this.id: 2
entry.id: 2
this.id: 3
entry.id: 3
但我得到的是:
this.id: 1
entry.id: 3
this.id: 2
entry.id: 3
this.id: 3
entry.id: 3
为什么entry对象总是id为3的entry?
如何在点击事件处理程序中获取正确的入口对象?
最佳答案
解决此问题的一种方法是:
var entries = [{id: 1},{id: 2},{id: 3}];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
document.getElementById(entry.id).onclick = (function (id) {
return function () {
console.log("this.id: " + this.id);
console.log("entry.id: " + id);
};
})(entry.id);
}
您可以使用自执行函数(其目的是提供一个 entry.id 将绑定(bind)到的闭包)返回一个绑定(bind)到特定 id 的新 onclick 处理程序。
如果您不这样做,您所有的 onclick 处理程序都会绑定(bind)到同一个入口变量,并以它在 for 循环期间收到的最后一个值结束。
关于javascript - 如何在 javascript 事件处理程序中获取对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4731417/