1

在创建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应该是新的每个圆圈和迭代。

如何使变量动态化，或者有更好的解决方案来解决这个混乱？

这是一个 codepen fork。

4

1 回答 1

1

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

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

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

于 2013-10-18T19:26:43.850 回答