最初のカードだけが反転します

Question

クリックまたはタブで画像を反転させるフォトギャラリーを作成したいときは、反転して画像自体とリンクに関する詳細を表示します。 CSS、JS、HTML全体を投稿していますので、誰でも自分のエラーを見つけられることを願っています。

JS：

$('#flip').on('click', function() { 
    $(".card", this).toggleClass("flipped"); 
}); 

HTML：

<div id="flip" class="flip"> 
    <div class="card"> 
     <div class="face front">Front</div> 
     <div class="face back">Back</div> 
    </div> 
</div> 
<div id="flip" class="flip"> 
    <div class="card"> 
     <div class="face front">Front</div> 
     <div class="face back">Back</div> 
    </div> 
</div> 

CSS：あなたがユニークなことになっているID値を、複製されているので

.flip { 
    perspective: 800; 
    width: 100%; 
    height: 200px; 
    position: relative; 
    margin: 50px auto; 
} 

.flip .card.flipped { 
    transform: rotatex(-180deg); 
} 

.flip .card { 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
    transition: 0.5s; 
} 

.flip .card .face { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    backface-visibility: hidden; 
    z-index: 2; 
    font-family: Georgia, 'Times New Roman', Times, serif; 
    font-size: 3em; 
    text-align: center; 
    line-height: 200px; 
} 

.flip .card .front { 
    position: absolute; 
    z-index: 1; 
    background: $da_grey; 
    color: $white; 
    cursor: pointer; 
} 

.flip .card .back { 
    transform: rotatex(-180deg); 
    background: #121212; 
    color: $white; 
    cursor: pointer; 
} 

Answer 1

それはあります。

$('.flip').on('click', function() { 
    $(".card", this).toggleClass("flipped"); 
}); 

しかし、あなたがID Sを複製していないことを確認してください：このためのクラスを使用することをお勧めし

<div id="flip1" class="flip"> 
    <div class="card"> 
     <div class="face front">Front</div> 
     <div class="face back">Back</div> 
    </div> 
</div> 
<div id="flip2" class="flip"> 
    <div class="card"> 
     <div class="face front">Front</div> 
     <div class="face back">Back</div> 
    </div> 
</div> 

$('#flip1, #flip2').on('click', function() { 
    $(".card", this).toggleClass("flipped"); 
}); 

：に変更します。