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

Create dynamic Two.js variables to involve individual click event

本文关键字：单个点 事件 动态 Two js 变量 创建      更新时间：2023-09-26

在创建 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引起的。

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

这是一个代码笔叉。

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

我已经分叉并制作了一个新的代码笔，它使用下划线.js的map方法，该方法捆绑在两个.js中。这类似于 for 语句，不同之处在于每次迭代它都会创建一个闭包，对正在构造的每个rotato变量进行独立引用。

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

相关文章：