Nur die erste Karte wird umgedreht

Question

Ich möchte eine Fotogalerie machen, die das Bild auf einen Klick oder Tab schiebt, wenn der Benutzer mehr Informationen über das Bild selbst und einen Link erhält. Ich habe mein gesamtes CSS, JS und HTML gepostet, also hoffe ich, dass jeder meinen Fehler erkennen kann.

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:

.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

Es ist, weil Sie ID Wert duplizieren, die eindeutig sein soll. Ändern Sie ihn auf:

<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"); 
}); 

Es ist besser, Klassen verwenden hierfür:

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

Aber stellen Sie sicher, dass Sie duplizieren nichtID s.