는 버튼을

Question

그래서 나는

function flip (event) 
{ 
    var element = event.currentTarget; 
    element.className = (element.className == 'card') ? 'card flipped' : 'card'; 
} 

가 어떻게 할 수 DIV 그것은 나의 onclick="flip(event)" (버튼에 부착 할 수 또는 클래스 이름을 변경하는 자바 스크립트 기능이 부모의 CSS 클래스 이름 속성을 변경 할 수 있도록 선호 이미지) 버튼을 누른 다음 div를 클릭하는 대신 카드를 뒤집습니다. 그럼 뭔가 같은

<div id="card" class="card"> 
    <p> 
    whatever 
    </p> 
<img onclick="flip(event)" src="foo"> 
</div> 

내 자바 스크립트 기능을 변경하려면 어떻게해야합니까?

Answer 1

잘 모르겠지만 '카드'클래스가있는 요소가 여러 개 있고 클릭 한 코드 만 변경하려는 경우 John 솔루션에 문제가있을 수 있다고 생각합니다.

<img onclick="javascript:flip(this.parentElement);" /> 

function flip (element) 
{ 
    element.className = (element.className == 'card') ? 'card flipped' : 'card'; 
} 

Answer 2

이 jQuery를 사용하면이처럼 그것을 할 수 있습니다 사용

<img onclick="javascript:flip('card');" /> 

function flip (elementId) 
{ 
    var element = document.getElementById(elementId) 
    element.className = (element.className == 'card') ? 'card flipped' : 'card'; 
} 

Answer 3

$('imgSelector').click(function() {

$(".card").toggleClass('card flipped');

});

작동합니다.

Simple javascript를 사용하면 ID를 DIV에게 제공해야합니다. 그런 다음 event.target을 사용하는 대신 document.getElementById ('myDIVID');

Answer 4

event 개체에는 이벤트를 발생시킨 요소에 대한 참조가 있습니다. parentNode을 사용하여 트리를 백업 할 수 있습니다.

이렇게하면 html 예제와 함께 사용할 수 있습니다.

function flip (event) 
{ 
    var image = event.target || event.srcElement; 
    var div = image.parentNode; 
    div.className = (div.className == 'card') ? 'card flipped' : 'card'; 
} 

target

는 srcElement IE는 동일한 요소이며, FF/크롬 발신 소자이다. ff/chrome에있는 currentTarget은 클릭 한 요소와 다를 수있는 핸들러를 호출 한 요소입니다. 예를 들어 div에 클릭 핸들러를 연결 한 경우 이미지를 클릭하면 실행됩니다. div의 핸들러가 실행되면 currentTarget이 div가되고 target이 이미지가됩니다. IE는 내가 알고있는 currentTarget에 대한 병렬 처리가 없습니다.