Javascript 正在构建一个包含文本的圆圈网格，并。。。搬家

我正在拼命地尝试构建一个包含圆圈和文本的网格。到目前为止还不错，我能做到。。。我真正的问题是能够找到每一个集合并在文本和圆圈中移动它。我曾试图研究类似的问题，但我自己无法发现。。。如果有人能给我一个线索，我将不胜感激

下面是一个简化的代码，只有一行不起作用：

$(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个集合，而没有数组=，它会工作

谢谢你的帮助

塞尔弗雷德

编辑：jsfiddle:

---

编辑：我不太清楚。我想要的是能够点击1个圆圈和文本，看到这个圆圈和文本移动。如果我点击另一个，那么另一个会移动。。。这听起来很简单，我简直不敢相信我被困在这上面了。。。谢谢你的帮助

这是一把[小提琴][http://jsfiddle.net/DusKv/1/]

代码中的问题是，调用click回调函数时，i变量没有正确的值。您可以通过在封闭范围内定义局部变量来解决此问题

// 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;
}

---

最终，我找到了一个转折点：

现在，我在单击事件中获得了正确的引用

我必须承认我不太明白我最初的问题。如果你能告诉我这个新的“解决方案”对你来说是否合适，我将不胜感激-

---

塞尔弗雷德。

谢谢你的回复，但是。。。这似乎也不起作用：-唯一移动的圆圈是最后一个，即使我单击第一个圆圈。。。