javascript - 动态设置函数参数

Question

您好，我确实有以下代码示例，其中我试图为每个元素提供不同的 onClick 功能:

for (var i = 0; i < sizex; i++) {
        for (var j = 0; j < sizey; j++) {
            var canvas = document.createElement("CANVAS");
            var id = i * 10 + j;
            canvas.id = "canvas" + id;
            canvas.width = 25;
            canvas.height = 25;
            canvas.style = "border:1px solid black";
            canvas.onclick = function() {
               canvasClicked(id);
            };

            document.body.appendChild(canvas);
        }
    }

问题是它总是用 id = sizex * 10 + sizey 调用

我可以将 canvasCliced 的参数传递给谁，这样这个函数对于每个 Canvas 都是“不同的”？

Answer 1

使用闭包。

更改您的点击处理程序

canvas.onclick = function() {
     canvasClicked(id);
};

形成一个闭包，其中变量的范围是可访问的。

canvas.onclick = function(nId) {
    return function() {
       canvasClicked(nId);
    }
}(id);