javascript - 创建动态 Two.js 变量以涉及单个点击事件

Question

在创建 two.js对象，以下是部分:

var circle1 = two.makeCircle(676,326,25);
circle1.noStroke().fill = getRandomColor();
circle1.domElement = document.querySelector('#two-' + circle1.id);
$(circle1.domElement)
    .css('cursor', 'pointer')
    .click(function(e) {
        circle1.fill = getNonMainRandomColor(getRandomColor());
    });

我尝试将所有必要的参数保存在数组中，如下所示:

[x 位置、y 位置、半径、颜色]

所以我有这个功能

function showCircles(array) {
  for(var i = 0; i < array.length; i++) {
    var rotato = two.makeCircle(array[i][0],array[i][1],array[i][2]);
    rotato.noStroke().fill = array[i][3];
    rotato.domElement = document.querySelector('#two-' + rotato.id);
    $(rotato.domElement).css('cursor', 'pointer').click(function(e) {rotato.fill = getNonMainRandomColor(getRandomColor());});
  } 
}

后者的问题在于这些行

    rotato.domElement = document.querySelector('#two-' + rotato.id);
    $(rotato.domElement).css('cursor', 'pointer').click(function(e) {rotato.fill = getNonMainRandomColor(getRandomColor());});

每次触发时都需要一个新变量，因此输出是一组圆圈，当单独单击时，只有最后一个圆圈会改变颜色，因为我的设置是由 var rotato 引起的> 每个循环和迭代都应该是新的。

如何使变量动态化或者是否有更好的解决方案来解决这个困惑？

Here is a codepen fork .

Answer 1

这里的问题是 JavaScript 的 for 语句不会为每次迭代创建闭包。因此，当单击任何圆圈时，它会查找对 rotato 的引用。每次迭代都会重用该变量，结果就是您所说的数组中的最后一项。

我已经 fork 并制作了一个新的 codepen，它使用 underscore.js的 map 方法捆绑在two.js 中。这类似于 for 语句，只不过它为每次迭代创建一个 closure对您正在构造的每个 rotato 变量进行独立引用。

http://codepen.io/anon/pen/ylzvx