在创建 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
引起的> 每个循环和迭代都应该是新的。
如何使变量动态化或者是否有更好的解决方案来解决这个困惑?
最佳答案
这里的问题是 JavaScript 的 for
语句不会为每次迭代创建闭包。因此,当单击任何圆圈时,它会查找对 rotato
的引用。每次迭代都会重用该变量,结果就是您所说的数组中的最后一项。
我已经 fork 并制作了一个新的 codepen,它使用 underscore.js的 map
方法捆绑在two.js 中。这类似于 for
语句,只不过它为每次迭代创建一个 closure对您正在构造的每个 rotato
变量进行独立引用。
关于javascript - 创建动态 Two.js 变量以涉及单个点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19357533/