Raphaeljs悬停在关联数组的每个元素上

Question

我正在使用Raphael JS绘制地图并在其上标记城市。

您可以看到代码here

我有一组元素 - 地图周围的圆圈（每个圆圈代表一个城市），我想在我徘徊时执行特定操作。 问题是，我不能为所有这些函数编写单个函数，我必须为每个元素编写相同的函数。

我该如何解决这个问题？

我试过

for (var city in cities) { cities[city].hover(function () { cities[city].attr({"fill": "#FF5B3A"}); }, function () { cities[city].attr({"fill": "none"}); } )};

但在那之后，当我在任何城市上空盘旋时 - 它描绘的是红色的最后一个城市，而不是我正在盘旋的城市。 请建议我一个解决方案。

Answer 1

你需要创建一个闭包和/或使用'this'，这样创建的函数就会知道它应用了哪个元素，而不仅仅是for循环中的最后一个元素。

有几种方法可以做到这一点，其中一种方法是创建其所指的城市的功能范围的直接功能。

或者您可以使用'this'来引用正确的元素。

for (var city in cities) {
       cities[city].hover(function () {
         this.attr({"fill": "#FF5B3A"});
       },
       function () {
         this.attr({"fill": "none"});
       })
};

jsfiddle