javascript raphael.js 여러 객체 및 이벤트

Question

hover 이벤트를 통해 raphael.js 객체에 이벤트를 연결하려고하는데 작동하지 않습니다. 여기 내 코드입니다 :

var paper = Raphael('menu', 400, 400); 

for(var i = 0; i < 6; i++) { 

    var x = 200, 
     y = 200; 

    var rx = Math.sin(i/6 * 2 * Math.PI), 
     ry = Math.cos(i/6 * 2 * Math.PI); 

    var hx = x + rx * 100, 
     hy = y + ry * 100; 

    var hexa = polygon(hx, hy, 6, 50); 

    hexa.attr("fill", "rgb(212, 212, 212)"); 
    hexa.attr("stroke-width", 0); 

    var hoverTitle = paper.text(hx + rx * 70, hy + ry * 70, "foo " + i); 

    var hoverIn = function() { 

     this.animate({fill: "rgb(247,245,240)"}, 300, '<>'); 
     hoverTitle.show(); 
     hoverTitle.animate({opacity:1}, 200, '<>'); 
    } 

    var hoverOut = function() { 

     this.animate({fill: "rgb(212, 212, 212)"}, 300, '<>'); 
     hoverTitle.animate({opacity:0}, 200, '<>'); 
     hoverTitle.hide(); 
    } 

    hexa.hover(hoverIn, hoverOut, hexa, hexa); 
} 

function polygon(x, y, N, side) { 

    var path = "", n, temp_x, temp_y, angle; 

    for(n = 0; n <= N; n++) { 

     angle = n/N * 2 * Math.PI; 

     temp_x = x + Math.cos(angle) * side; 
     temp_y = y + Math.sin(angle) * side; 

     path += (n === 0 ? "M" : "L") + temp_x + "," + temp_y; 
    } 

    return paper.path(path); 
} 

내가 각 육각형이 맴돌고 때 foo는의 표시하려면,하지만 항상 마지막 foo는에 다스 려 왜 내가 이해 해달라고 ... 난 개별적으로 하나 하나를 선언해야 하는가? 당신은 당신이 콜백에서 그것으로 조작하려고 할 때 그래서 당신은 항상 마지막에 하나를 사용, 전역 변수로 hoverTitle을 정의하기 때문에

여기 a fiddle

Answer 1

이 일어나고있다.

hexa.hoverTitle = paper.text(hx + rx * 70, hy + ry * 70, "foo " + i); 

을 그리고 콜백이 속성 조작 :

this.hoverTitle.show(); 
this.hoverTitle.animate({opacity:1}, 200, '<>'); 

Fiddle

용액은 다음과 같이, 예를 들면, 각 육각형 로컬 속성으로 hoverTitle를 정의하는 것이다