자바 스크립트 이벤트 - 하나의 요소에서만 액세스해야하는 변수를 만들고 저장하는 방법?

Question

제가 가지고 놀고있는 스크립트에 약간의 문제가 있습니다. 삼각형을 그리려고하는데, 그 주위를 클릭하고 색상을 바꾸면 다시 클릭하면 원래 상태로 되돌아갑니다. 문제는 "isflipped"변수를 어디에 설정해야할지 모르겠다는 것입니다.

누구나 아이디어가 있습니까/전에 이런 문제가 떠오르는 사람이 있습니까? 여기에 내가 지금이 내용은 다음과 같습니다

http://jsfiddle.net/hnqB6/17/

감사합니다!

Answer 1

지도의 요소 색인을 키로 저장하여 값을 저장할 수 있습니다.

var flipmap = {} 
flimmap[index] = false 

//later in click 
flipmap[index] = !flipmap[index] 

다른 대안은 예를 들어 데이터 요소를 연결하는 jquery data API를 사용하는 클릭보다 요소

jQuery.data($("canvas")[i], 'flipped', false)//not-flipped 

당

처음 초기화 이성을 상실 값이

var flipped = jQuery.data(elem,'flipped')//old value 
flipped = !flipped;//toggle it 
jQuery.data(elem,'flipped',flipped)//save it 

나는 또한 함께 할 수

http://jsfiddle.net/anuraguniyal/hnqB6/38/

Answer 2

데이터를 사용

당신이 캔버스 당 하나의 삼각형 거기에 디자인을 유지하는 경우

//read 
$(yourElem).data("flipped") 
//write 
$(yourElem).data("flipped", true); 

Answer 3

, 당신은 jQuery의 data() 방법을 사용하여 캔버스 요소 자체에 이성을 상실 상태를 설정할 수 있습니다. 따라서 클릭 이벤트 처리기에서 상태를 설정하려면 $(e.currentTarget).data('isflipped', 1);을 사용하고 상태를 가져 오려면 var isflipped = $(e.currentTarget).data('isflipped')을 사용하십시오.

캔버스 하나당 삼각형을 사용하지 않는 경우 중간 모드 캔버스에서 벗어나 더 많은 유지 모드로 전환 할 수 있도록 중간 드로잉 추상화를 추가해야합니다.

Answer 4

데이터를 사용하여 요소 자체에 변수를 첨부 할 수 있습니다. 당신의 바이올린을 업데이트했습니다.

Answer 5

으로 예를 업데이트 한 토글 각 캔버스에는 단순한 속성이 뒤집어졌지만 th (클래스를 대신 사용하는) Darek이 말한 것입니다. http://jsfiddle.net/hnqB6/55