특정 카드를 뒤집기 onClick 메모리 게임을 클릭하십시오.

Question

그래서 저는 메모리 게임을하고 있습니다. 멋지게 뒤집을 카드가 있습니다.하지만 클릭 할 때마다 카드가 뒤집 힙니다. 가능한 한 각각의 카드에 ID를 부여하지 않는 메토를 사용하고 싶습니다 ... 도와주세요.

HTML

<section class="cardsContainer"> 
     <div class="card" onclick="flip()"> 
      <div class="front"><img src="../images/backsideBlue.png"></div> 
      <div class="back"><img src="../images/cookie.JPG"></div> 
     </div> 
    </section> 
    <section class="cardsContainer"> 
     <div class="card" onclick="flip()"> 
      <div class="front"><img src="../images/backsideBlue.png"></div> 
      <div class="back"><img src="../images/cookie.JPG"></div> 
     </div> 
    </section> 
    <section class="cardsContainer"> 
     <div class="card" onclick="flip()"> 
      <div class="front"><img src="../images/backsideBlue.png"></div> 
      <div class="back"><img src="../images/cookie.JPG"></div> 
     </div> 
    </section> 
    <section class="cardsContainer"> 
     <div class="card" onclick="flip()"> 
      <div class="front"><img src="../images/backsideBlue.png"></div> 
      <div class="back"><img src="../images/cookie.JPG"></div> 
     </div> 
    </section> 
    <section class="cardsContainer"> 
     <div class="card" onclick="flip()"> 
      <div class="front"><img src="../images/backsideBlue.png"></div> 
      <div class="back"><img src="../images/cookie.JPG"></div> 
     </div> 
    </section> 
</div> 

CSS

.cardsContainer { 
    width: 230px; 
    height: 320px; 
    position: relative; 
    border: 1px dashed red; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    -o-perspective: 800px; 
    perspective: 800px; 
    margin: 20px 10px 10px 10px; 
    display: inline-block; } .card { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    -o-transition: -o-transform 1s; 
    transition: transform 1s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform-origin: 50% 50%; } .card div { 
    display: block; 
    height: 100%; 
    width: 100%; 
    line-height: 260px; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    font-size: 140px; 
    position: absolute; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; } .card .front { } .card .back { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); } .card.flipped { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); } 

JS

function flip() { 
    $('.card').toggleClass('flipped'); 
} 

Answer 1

당신이 보여주는 기능은 자바 스크립트하지만, JQuery와 없습니다. JQuery에서 $('.card')은 "클래스 'card'를 가진 모든 요소를 ​​의미합니다. 당신이해야 할 일은 단지 자신을 뒤집을 수있는 각각의 카드 객체에 하나의 onclick() 기능을 붙이는 것입니다. 나는 때문에,

내가 노력 할게요 좋아

function flip(e) { e.toggleClass('flipped'); }