特定のカードを反転するメモリゲームをクリックする

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

あなたが示す機能は、JavaScriptのではなく、jQueryの。 JQueryでは、$('.card')は「クラス 'card'を持つすべての要素」を意味します。あなたがする必要があるのは、自分自身だけを反転させるカードオブジェクトのそれぞれに単一のonclick()機能を付けることです。私はので、私は、私は本当に正確にどのように理解していなかった、頑張ります

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