Raphaeljs наведите курсор на каждый элемент ассоциативного массива

Question

Я использую Raphael JS, чтобы нарисовать карту и отметить города на ней.

Вы можете увидеть код здесь

У меня есть набор элементов - круги вокруг карты (каждый круг обозначает город), которые я хочу выполнять при выполнении определенных действий. Проблема в том, что я не могу написать одну функцию для всех них, я должен написать одну и ту же функцию для каждого элемента.

Как мне решить эту проблему?

Я старался

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

но после этого, когда я нахожусь над любым городом - он рисует последний город в красном, а не город, над которым я парю. Пожалуйста, предложите мне решение.

Answer 1

Вам нужно создать замыкание и / или использовать this, чтобы созданная функция знала, к какому элементу она применяется, а не только к последнему элементу цикла for.

Есть несколько способов сделать это, один из которых - немедленная функция для создания области действия того города, на который он ссылается.

Или вы можете просто использовать "это" для ссылки на правильный элемент.

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

jsfiddle