Jquery 动态文本和与jCanvas的链接

我有一张画布，我用的是jCanva(http://calebevans.me/projects/jcanvas/docs.php?p=layers)s用事件创建圆圈

我希望每个圆圈都有文本（用于鼠标悬停事件）和id（用于单击事件）。 问题是事件是动态的，“i”总是最后一个i（data.length），所以所有的圆都得到相同的值。。。 我怎样才能解决它

 for (i = 0; i < data.length; i++) {
                var id = data[i][0];
                var text = data[i][2];

                $("#mapCanvas").drawArc({
                    layer: true,
                    fillStyle: "yellow",
                    strokeStyle: "#000",
                    strokeWidth: 1,
                    x: Math.random() * c.clientWidth,
                    y: Math.random() * c.clientHeight,
                    radius: 6,
                    click: function (layer) {
                        window.open("Edit/" + id);
                    },
                    mouseover: function (layer) {
                       $("canvas")
                       .addLayer({
                            method: "drawRect",
                            name: "BackgroundLabel",
                            group: "ItemLabel",
                            fillStyle: "#FFFFD4",
                            x: layer.x + 10,
                            y: layer.y - 15,
                            width: 100,
                            height: 20
                       })
                       .drawLayers();

                       $("#mapCanvas").drawText({
                        layer: true,
                        fillStyle: "white",
                        strokeWidth: 0,
                        x: layer.x + 10,
                        y: layer.y - 10,
                        font: "14pt Arial, Verdana, sans-serif",
                        text: text
                        });
                    }
                });

for（i=0；i

我修复了它-我创建了一个单独的创建函数“drawOneCircle”，用于获取变量并使用它们。 “drawOneCircle”现在包含原始“for”循环的内容

for（i=0；i

我知道这不完全是您想要的，但请查看此库- 它非常适合创建数据驱动的文档，并将使您的工作更加轻松。

---

我认为使用svg会比使用canvas提供更好的性能。

@TamarG：为了理解为什么您的“I”总是最后一个I（data.length），我强烈推荐一本名为“由Trevor Burnham编写。我已经用很多语言编写了程序，在读这本书之前我一直认为我知道JavaScript。JavaScript事件管理是非直观的-事件管理与我使用的任何其他语言都不同。我在读这本书之前没有得到它。

检查是否可以将id/名称推送到作为参数的层对象事件处理程序，也可以这样编写：`click:`function（）{return function（id）{window.open（“Edit/”+id）；}}}}（）；`为每个图形创建不同的作用域

           for (i = 0; i < data.length; i++) {
                var id = data[i][0];
                var text = data[i][2];
                drawOneCircle(c, id, text);
            }