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

在创建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

 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 。

Answer 1

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

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

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