jQuery에서 $ .each의 이상한 동작

Question

MySQL 데이터베이스에서 SVG 경로를 가져 와서 raphaeljs.com의 스크립트를 사용하여 모양을 그려주는 코드를 작성하고 있습니다. onmouseover 속성에 문제가 있습니다. 마우스를 가져 가면 각 도형이 다른 채움 색상을 갖기를 원하지만, 모양을 가져올 때마다 그려진 마지막 도형이 채색되어 있고 그 중 하나가 아닙니다. 유혹.

function drawShapes(data,geolevel,transparent){ 
    $.each(data, function(code,shape){ 
     var contour = shape.contour.split(" "); 
     attributes = {}; 
     attributes["fill"] = (transparent ? "none" : shape.fillcolor); 
     attributes["fill-opacity"] = "0.75"; 
     attributes["stroke"] = shapeProperties[geolevel]["stroke"]; 
     attributes["stroke-width"] = shapeProperties[geolevel]["stroke-width"]; 

     index = shapeProperties[geolevel]["prefix"] + code; 
     shapes[index] = drawPath("M " + contour.join(" ") + " z").attr(attributes); 
     shapes[index].fill = shape.fillcolor; 
     if (!transparent) { 
      shapes[index][0].onmouseover = function() { 
       shapes[index].attr({fill: hoverfill}); 
      }; 
      shapes[index][0].onmouseout = function() { 
       shapes[index].attr({fill: shapes[index].fill}); 
      }; 
     } 
    }); 
} 

shapeProperties

그들의 타입에 따라 형상의 특성을 포함하는 전역 변수 (객체)이다

여기 데이터에 포함되어있는 모양을 그리는 JS 함수의 코드이다.

내 onmouseover에 문제가 있습니까? 자세한 내용은 내 스크립트가이 데모를 기반으로합니다. http://raphaeljs.com/australia.html

미리 감사드립니다!

Answer 1

이 라인 :이 문제의 원인이 될 수있는 전역 변수를 선언하는 것처럼

index = shapeProperties[geolevel]["prefix"] + code; 

보인다. var 키워드를 사용하여 기능 범위를 지정하십시오.