2017-10-24 17 views
2

Raphaël 프레임 워크를 사용하여 동적 모양을 그리는 중입니다 (clickeable하게 만들면 밝게 할 수 있습니다 ...).배열에 액세스

배열에 올바르게 액세스 할 수 없습니다. 당신이 그들과 상호 작용할 수 있도록

sieges["1"] = assembly.path("M236.51 ... 108"); 
sieges["2"] = assembly.path("M483.51 ... 71"); 
sieges["3"] = assembly.path("M427.51 ... 272"); 
sieges["4"] = assembly.path("M135.51 ... 348"); 
sieges["5"] = assembly.path("M617.51 ... 413"); 

그들은 목적과 같다 :

내가 배열을 만든

:

var siegeurs = { 

    1 : [{   
      "Nom" : "User1", 
      "Photo" : "url" 
      }], 
    2 : [{ 
      "Nom" : "User2", 
      "Photo" : "url" 
      }], 
    3 : [{  
      "Nom" : "User3", 
      "Photo" : "url" 
      }], 
    4 : [{  
      "Nom" : "User4", 
      "Photo" : "url" 
      }], 
    5 : [{   
      "Nom" : "User5", 
      "Photo" : "url" 
      }] 
}; 

는이 프레임 워크의 무승부는 모양이다.

for(var siegeNum in sieges) { 
(function (siege) { 
    siege.attr(style); //apply style to shapes 

    siege[0].addEventListener("mouseover", function() { 
     siege.animate(hoverStyle, animationSpeed); //add hoverstyle when hovered 

     //The line I can't figure out 
     document.getElementById("textelement").innerHTML = siegeurs[siegeNum]["Nom"]; 
     //The line I can't figure out 


    }, true); 

    siege[0].addEventListener("mouseout", function() { 
     siege.animate(style, animationSpeed); 
     document.getElementById("textelement").innerHTML = baseTxt; 
    }, true); 

}) 
(sieges[siegeNum]); 
} 

textelement 나는 모양이 가져 가면 수정하려고 기본 텍스트입니다 :

은 루프입니다. 실제로 모양을 가리키면 텍스트가 "정의되지 않음"으로 이동합니다.

난 그냥 확인하려면이 방법을 시도 :

document.getElementById("textelement").innerHTML = siegeurs[siegeNum]; 

을하지만 마우스를 가져 가면, 텍스트는 [개체 개체]로 이동합니다.

도움을 주시면 감사하겠습니다. 당신의 siegeurs 객체

답변

2

각 값은 배열, 그래서 필요한 내부 특성 "Nom"는 다음과 같이 액세스 할 수 있어야합니다

... 
document.getElementById("textelement").innerHTML = siegeurs[siegeNum][0]["Nom"]; 
의미가 있습니다
+0

! 그렇다면 포위 공격이 끝난 후에뿐만 아니라 [siegeNum]과 [ "Nom"] 사이에 [0]을 넣어야하는 이유는 무엇입니까? – Lawris

+1

JavaScript의 배열도 객체로 취급되기 때문에,이 대안을'siegeurs [siegeNum] [0] .Nom' – Thielicious