使用 p5js 创建多个可点击的 div答案

【问题标题】：Creating Multiple Clickable Divs with p5js使用 p5js 创建多个可点击的 div
【发布时间】：2018-08-01 00:46:24
【问题描述】：

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

我正在尝试在 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);
}

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

【问题讨论】：

标签： javascript html processing p5.js

【解决方案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，然后将打印出i: 10 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);
}

这为您的变量提供了块范围，这意味着该变量仅在for 循环内的范围内。因此，循环的每次迭代都有自己的副本，您的函数现在将按照您的预期工作。

【讨论】：