javascript - 使用 p5js 创建多个可点击的 Div

Question

编辑:我想通了。我只是走了一条完全不同的路线，制作了一个 Button 类并在我的实际 Canvas 上使用矩形来表示它们。

我试图在 p5js 中以编程方式制作多个可点击按钮，但我遇到了一个问题。所有的 div 都被创建，它们显示并有适当的 HTML 与之相关联，但无论单击哪个，都只会诱导最后一个按钮的功能。

这是一张照片:

那些是我右边的按钮，但无论你点击哪里，选择的颜色总是底部的紫色。

这是我的代码:

for (var i = 0; i < colorCodes.length ; i++){
    var div = createDiv(str(i));
    div.parent('control-holder');
    div.style('background-color', colorCodes[i]);
    div.style('height', '40px');
    div.mousePressed(function(){
        console.log(div.html()); //always prints 7
        changeColor(int(div.html()));
    });
    buttons.push(div);
}

非常感谢任何帮助，我不明白为什么它不起作用。

Answer 1

这是一个常见的 JavaScript 陷阱。

当您使用 var 关键字时，您创建的变量具有函数范围，这意味着该变量(在您的情况下，您的i 变量)保持它的值直到函数结束，而不是直到循环结束。考虑这段代码:

for(var i = 0; i < 10; i++){
    console.log('i: ' + i);
}

console.log('final i: ' + i);

这段代码会在循环中打印出0-9，然后在循环结束后打印出10。

现在，让我们稍微修改一下代码:

for(var i = 0; i < 10; i++){
    setTimeout(function(){
        console.log('i: ' + i);
    }, 1000);
}

console.log('final i: ' + i);

现在循环设置超时回调。这段代码会先打印出final i: 10，然后再打印10次i: 10。这是因为 console.log('final i: ' + i); 行发生在 调用回调函数之前。由于该变量具有函数作用域，因此它采用最后给出的值。这是另一个例子:

var i = 42;

setTimeout(function() {
    console.log('i: ' + i);
}, 1000);

i = 37;

您可能希望此代码打印出 42，但同样，回调函数在这段代码运行之后被调用，所以在它被调用时，i 是 37。

无论如何，回到您的代码。希望上面的示例向您展示了您的代码中发生的事情:var 关键字创建了一个函数范围的变量，这意味着当您的 mousePressed 回调被调用时，该变量保存它设置的最后一个值到。

传统上，解决这个问题的方法是通过另一个函数调用:

for (var i = 0; i < 10; i++) {
    callSetTimeout(i);
}

console.log('final i: ' + i);

function callSetTimeout(i) {
    setTimeout(function() {
        console.log('i: ' + i);
    }, 1000);
}

但是从 JavaScript 6 开始，您可以使用 let 关键字代替 var:

for(let i = 0; i < 10; i++){
    setTimeout(function(){
        console.log('i: ' + i);
    }, 1000);
}

这为您的变量提供了 block 范围，这意味着该变量仅在for 循环内的范围内。因此，循环的每次迭代都会获得自己的副本，您的函数现在将按预期运行。