JQuery具有多个翻转面板

我正在尝试在一页上制作多张翻页卡片。当你点击里面的链接时，每一张卡片都会被激活。我确实有这个工作。但当我制作多张“卡片”时，它会翻转所有的卡片。我已经经历了事件处理程序结构，但我显然是有点不知所措。任何帮助都将不胜感激

这就是我基于以下内容开展这项工作的例子：

以下是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; }

这是小提琴小提琴：

而不是

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

使用：

看这个

---

这样做的目的不是选择所有的

.card

项目，而是获取最接近单击链接的项目。

这完全奏效了。我试着在不同的配置中使用（这个），但成功了。谢谢

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