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 position, y position, radius, color]

所以我有功能

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的引用内容。此变量将在每次迭代时重复使用，结果就是您所指的数组中的 last 项。

我已经分叉并创建了一个新的codepen，它使用underscore.js的map方法捆绑在two.js中。这与for语句类似，不同之处在于每次迭代都会创建一个closure，对您正在构建的每个rotato变量进行独立引用。

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

创建动态Two.js变量以涉及单个click事件

1 个答案: