JQuery несколько флип-панелей с

Question

Я пытаюсь сделать несколько флип-карт на одной странице. Каждая из карт должна активироваться, когда вы нажимаете на ссылку внутри. У меня это работает. Но когда я делаю несколько «карточек», он переворачивает их все. Я прошел через структуру обработчика событий, но я, очевидно, передо мной. Любая помощь была бы очень признательна!

Это пример я основывая эту работу прочь:

http://css3playground.com/flip-card.php

Вот JS:

$(document).ready(function(){ 
     $('.card .action-front').click(function(e){ 
      $('.card').addClass('flip'); 
      e.preventDefault(); 
     }); 
     $('.card .action-back').click(function(e){ 
      $('.card').removeClass('flip'); 
      e.preventDefault(); 
     }); 

    }); 

Вот мой CSS:

.panel { 
     float: left; 
     width: 200px; 
     height: 200px; 
     margin: 20px; 
     position: relative; 
     font-size: .8em; 

     -webkit-perspective: 600px; 
     -moz-perspective: 600px; 
    } 

    .panel .front { 
     float: none; 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 900; 
     width: inherit; 
     height: inherit; 
     border: 1px solid #ccc; 
     background: #fff; 
     text-align: center; 

     -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9); 
     -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9); 
     box-shadow: 0 1px 5px rgba(0,0,0,0.9); 

     -webkit-transform: rotateX(0deg) rotateY(0deg); 
     -webkit-transform-style: preserve-3d; 
     -webkit-backface-visibility: hidden; 

     -moz-transform: rotateX(0deg) rotateY(0deg); 
     -moz-transform-style: preserve-3d; 
     -moz-backface-visibility: hidden; 

     /* -- transition is the magic sauce for animation -- */ 
     -o-transition: all .4s ease-in-out; 
     -ms-transition: all .4s ease-in-out; 
     -moz-transition: all .4s ease-in-out; 
     -webkit-transition: all .4s ease-in-out; 
     transition: all .4s ease-in-out; 
    } 
    .panel.flip .front { 
     z-index: 900; 
     border-color: #eee; 
     background: #fff; 

     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 

     -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2); 
     -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2); 
     box-shadow: 0 15px 50px rgba(0,0,0,0.2); 
    } 

    .panel .back { 
     float: none; 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 800; 
     width: inherit; 
     height: inherit; 
     border: 1px solid #ccc; 
     background: #fff; 
     text-shadow: 1px 1px 1px rgba(0,0,0,0.6); 

     -webkit-transform: rotateY(-180deg); 
     -webkit-transform-style: preserve-3d; 
     -webkit-backface-visibility: hidden; 

     -moz-transform: rotateY(-180deg); 
     -moz-transform-style: preserve-3d; 
     -moz-backface-visibility: hidden; 

     /* -- transition is the magic sauce for animation -- */ 
     -o-transition: all .4s ease-in-out; 
     -ms-transition: all .4s ease-in-out; 
     -moz-transition: all .4s ease-in-out; 
     -webkit-transition: all .4s ease-in-out; 
     transition: all .4s ease-in-out; 
    } 

    .panel.flip .back { 
     z-index: 1000; 
     background: #fff; 

     -webkit-transform: rotateX(0deg) rotateY(0deg); 
     -moz-transform: rotateX(0deg) rotateY(0deg); 

     box-shadow: 0 15px 50px rgba(0,0,0,0.2); 
     -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2); 
     -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2); 
    } 

.card { 
    width: 290px; 
    height: 240px; 
} 

    .panel .pad {padding: 0 15px; } 
    .panel.flip .action-front {display: none; } 
    .block ol li {text-align: left; margin: 0 0 0 28px; } 
    .block .action-front {display: block; padding: 3px; background: #333; text-align: right; font-size: .8em; opacity: 0; position: absolute; cursor: pointer; -webkit-transition: opacity .2s linear; } 
    .block:hover .action-front {opacity: .7; } 
    .circle div {border-radius: 100px; } 
    .circle div h2 {padding-top: 3em; text-align: center; } 

Здесь является скрипкой скрипки: http://jsfiddle.net/5AWSJ/2/

Answer 1

Вместо

$('.card').addClass('flip'); 

Использование:

$(this).closest('.card').addClass('flip'); 

Смотрите эту updated jsFiddle.

Что это такое, вместо того, чтобы выбирать все пункты .card, он получает ближайшую по ссылке ссылку.