javascript - Raphaeljs hover on each element of the associative array -

i using raphael js draw map , mark cities on it.

you can see code here

i have set of elements - circles around map, (each circle stands city) want perform specific actions when hovering on. problem is, cant write single function of them, have write same function each element.

how solve problem?

i tried

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

but after that, when hovering on city - paints last city in red, not city hovering over. please suggest me solution.

you need create closure and/or use 'this', created function know element applied, , not last element in loop.

there's couple of ways that, 1 of immediate function create function scope of city referring to.

or can use 'this' refer correct element.

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

jsfiddle