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

Question

我正在使用 Raphael.js 绘制 map 并在其上标记城市。

可以看到代码here .

我有一组元素 - map 周围的圆圈(每个圆圈代表一个城市)，当我悬停在上面时我想执行特定的操作。

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

我该如何解决这个问题？

我试过:

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