두 개의 버튼이 자바 스크립트에서 충돌합니다

Question

div와 두 개의 단락으로 구성된 두 개의 버튼이 있습니다. 각 버튼은 서로 일치합니다. 그래서 당신은 버튼 하나를 클릭하고, 버튼 하나는 45도 회전하고 단락은 열린 단락, 단락 2는 단락 2를 제외하고 동일하게 작동합니다. 웬일인지 첫 번째 버튼을 클릭하면 두 단락이 모두 열리고 두 번째 버튼을 클릭하면 아무 일도 일어나지 않으며 이유를 알 수 없습니다. 결국 버튼과 단락을 여러 개 설정해야합니다.

var epidural_analgesia_INFO = document.images[0]; 
epidural_analgesia_INFO.style.setProperty("-webkit-transition", "-webkit-transform 0.3s ease-in-out"); 

var epidural_analgesia_DEG = 0; 

epidural_analgesia_INFO.addEventListener('click', function() { 
$("p#epidural_analgesia_TEXT").slideToggle("fast"); 
epidural_analgesia_DEG += 45; 
epidural_analgesia_INFO.style.setProperty('-webkit-transform', 'rotateZ('+epidural_analgesia_DEG+'deg)'); 
}); 




var effects_of_yoga_INFO = document.images[0]; 
effects_of_yoga_INFO.style.setProperty("-webkit-transition", "-webkit-transform 0.3s ease-in-out"); 

var effects_of_yoga_DEG = 0; 

effects_of_yoga_INFO.addEventListener('click', function() { 
$("p#effects_of_yoga_TEXT").slideToggle("fast"); 
effects_of_yoga_DEG += 45; 
effects_of_yoga_INFO.style.setProperty('-webkit-transform', 'rotateZ('+effects_of_yoga_DEG+'deg)'); 
}); 

나는 바이올린의 설정을 가지고 있지만, 대형이고 그래서 여기에 특정 부분을 꺼내했지만, 당신이 TEH 바이올린을보고 싶은 경우는 여기 : 저를 도와 주셔서 http://jsfiddle.net/loriensleafs/AM2a2/12/ 덕분에 아주 많이.

epidural_analgesia_INFO 
effects_of_yoga_INFO 

을하지만 두 변수가 document.images[0]를 참조 초기화됩니다

Answer 1

당신은이 두 가지 변수에 의해 참조되는 요소에 클릭 핸들러를 지정하고 있습니다. 이미지를 클릭하면 두 핸들러가 모두 트리거됩니다. 두 번째 이미지를 얻으려면 두 번째 이미지에 1의 인덱스를 사용해야합니까?

Answer 2

가 TEH 첫 번째 줄에, 그것을 가지고 (? 제쳐두고, 당신이 jQuery를 사용하는 것 같다 때 왜 addEventListener()을 사용하는 등)

VAR epidural_analgesia_INFO = document.getElementById를 ('epidural_analgesia_INFO');

대신

VAR effects_of_yoga_INFO document.images = [0];