Создание динамических переменных Two.js привлечь отдельного события CLICK

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. Эта переменная повторно используется для каждой итерации, и результат - это то, что вы называете последним элементом массива.

Я разветвил и создал новый код, который использует метод , который поставляется в двух экземплярах. Это похоже на инструкцию for, за исключением того, что для каждой итерации создается closure, создавая независимые ссылки на каждую переменную rotato, которую вы строите.

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