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

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

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

我希望代码将图片放在<div id="abc"></div>内，将另一张图片放在<div id="xyz"></div>内。

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

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

我是JS的新手，但仍然没有扎实地掌握其内部运作方式。这里有什么问题，我该如何解决？

任何帮助表示赞赏。感谢。

Answer 1

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

应该这样做。既然我们知道图像在我们想要的div中，只需要一个dom元素并获得它的id。

Answer 2

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

你应该做的是将参数建立在图像对象本身上。每个DOM对象都知道它在DOM树中的位置，所以当它被点击时，onclick代码应该使用DOM遍历操作来确定它内部的div并动态检索它的ID。这样你就不必担心绑定变量和作用域问题了......只需弄清楚哪个div包含你的图像并在运行时获取ID。

Answer 3

尝试：

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

希望有所帮助

为什么onclick的处理功能不能按预期工作？

3 个答案: