Renverser des cartes spécifiques surCliquer dans un jeu de mémoire

Question

SO Je travaille sur un jeu de mémoire et j'ai les cartes à tourner bien, mais quand je clique pour en retourner une, elle les retourne toutes. Je préfèrerais utiliser un système qui ne donne pas une ID à chaque carte si possible ... aidez s'il vous plaît.

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

La fonction Show est pas JavaScript, mais JQuery. Dans JQuery, $('.card') signifie "tous les éléments avec la classe 'carte'". Ce que vous devez faire est d'attacher une seule fonction onclick() à chacun des objets de la carte qui se retourne seulement.

Essayez de changer le code HTML à onclick="flip(this)", et le changement de la fonction flip seulement changer l'élément qui lui est passé:

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