为什么onclick的处理函数没有按预期工作？

Question

我有以下一小段代码：

var instance = this;
window.onload = function () {
    for (var i = 0; i < array.length; ++i) {
        var currentDivId= array[i];
        var currentDiv = document.getElementById(currentDivId);
        
        try {
            if (!currentDiv) {
                throw 'Div id not found: ' + currentDivId;
            }
            var image = document.createElement('img');
            image.src = 'img.jpg';
            image.onclick = function() {
                instance.doSomething(currentDivId);
            };
            
            currentDiv.appendChild(image);
        }
        catch(e) {
            console.warn('oops');
        }
    }
};

这段代码传递了一个 div 的 id 数组。它的作用是在每个 div 上渲染图像并设置它们的 onclick 属性。

假设我有一个字符串数组： ['abc', 'xyz']

我希望代码将图像放置在

中; 和

内的另一个图像。

当您单击第一张图像时，应使用参数 'abc' 调用 instance.doSomething 函数，反之亦然。

但代码没有按预期工作。它始终使用数组中的最后一个参数调用 instance.doSomething，在本例中为 'xyz'。

我是 JS 的新手，仍然没有掌握其内部工作原理。这里出了什么问题，我该如何修复它？

任何帮助表示赞赏。

Answer 1

image.onclick = function() {
    instance.doSomething(this.parentNode.id);
};

应该可以做到这一点。由于我们知道图像位于我们想要获取的 div 内，因此只需向上移动一个 dom 元素即可获取其 id。

Answer 2

欢迎来到 Javascript 范围问题的奇妙世界。就目前而言，JS 将您的 onclick 代码视为“当单击此对象时，在单击发生时获取存储在 currentDivID 变量中的值并将其传递给 doSomething 函数”。

您应该做的是将参数基于图像对象本身。每个 DOM 对象都知道它在 DOM 树中的位置，因此在单击它时，onclick 代码应该使用 DOM 遍历操作来找出它所在的 div 并动态检索其 ID。这样您就不必担心绑定变量和范围问题...只需找出哪个 div 包含您的图像并在运行时获取 ID 即可。

Answer 3

尝试：

image.onclick = (function() {
  var currentD = currentDivId;
  return function() { 
      instance.doSomething(currentD);
  }
})();

希望有帮助