Блог

Я отчаянно пытаюсь построить сетку с кругами и текстом внутри. Пока все хорошо, я могу это сделать… Моя настоящая проблема заключается в возможности находить каждый набор и перемещать его (текст и круг). Я пытался рассмотреть похожие проблемы, но не могу разобраться сам… Если бы кто-нибудь мог дать мне подсказку, я был бы очень признателен.

Вот упрощенный код (всего 1 строка), который не работает :

 $(function() {
        // Prepare drawing zone
        var paper = Raphael(document.getElementById('question'), '100%', '100%');

        var word = 'Sunday';

        var group = new Array();
        // Draw 5 circles with text inside
        for (i=0; i<5; i  ) {
            group[i] = paper.set();
            group[i].push(paper.circle(50 i*60, 50, 30));
            group[i].push(paper.text(50 i*60, 50, word));

            group[i].click(function() {
                group[i].translate(20,20); // HERE'S THE PROBLEM group[i] DOESN'T WORK !
                group[i].rotate(Math.random() * 90);
            });
             }
    });
  

Я не могу найти способ «вызова» моих наборов для дальнейшего использования…
Конечно, если у меня есть только 1 set (и нет array= , это работает…

Спасибо за вашу помощь!

Celfred.

Редактировать : jsfiddle : http://jsfiddle.net/rrWqM /

Редактировать: я не уверен, что я достаточно ясен. Я хотел бы иметь возможность щелкнуть по 1 кругу (и тексту) и увидеть, как ЭТОТ круг и текст перемещаются. Если я нажимаю на другой, то другой перемещается… Это звучит так просто, что я не могу поверить, что застрял на этом… Спасибо за помощь.

Вот [скрипка] [http://jsfiddle.net/DusKv/1 /]

Проблема в вашем коде заключается в том, что переменная i не имеет правильного значения при вызове функции обратного вызова click . Вы можете обойти это, определив локальную переменную во внешней области видимости.

 // Prepare drawing zone
var paper = Raphael(document.getElementById('question'), '100%', '100%');

var word = 'Sunday';

var group = new Array();
// Draw 10 circles with text inside
for (i = 0; i < 10; i  ) {
    var set = paper.set();
    set.push(paper.circle(50   i * 30, 50, 50));
    set.push(paper.text(50   i * 30, 50, word));

    set.click(function() {
        set.translate(Math.random() * 350, Math.random() * 380); // HERE'S THE PROBLEM group[i] DOESN'T WORK !
        set.rotate(Math.random() * 90);
    });
    group[i] = set;
}
  

В конце концов, я нашел решение таким образом: jsfiddle

Теперь я получаю правильную ссылку в моем событии щелчка.

Должен признать, я не совсем понял свою первоначальную проблему. Если бы вы могли хотя бы сказать мне, подходит ли вам это новое «решение», я был бы признателен 😉

Celfred.