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

Question

我正在使用Raphael.js绘制地图并在上面标注城市。

您可以在这里查看代码。

我有一组元素 - 地图周围的圆圈（每个圆圈代表一个城市），我希望在悬停时对它们执行特定的操作。

问题是，我无法为所有元素编写单个函数。我必须为每个元素编写相同的函数。

如何解决这个问题？

我尝试过：

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

但是在此之后，当我将鼠标悬停在任何城市上时，它会将最后一个城市涂成红色，而不是我正在悬停的城市。

请提供一个解决方案。

- naneri

Answer 1

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

有几种方法可以做到这一点，其中之一是立即函数，以创建其正在引用的函数作用域。

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

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

jsfiddle

的英文是：

jsfiddle

。

- Ian