Question

我正在尝试在一个页面上制作多张翻转卡片。单击内部链接时，每个卡都应激活。我确实有这个工作。但是当我制作多张“牌”时，它会翻转所有牌。我已经完成了事件处理程序结构，但我显然已经超出了我的想象。任何帮助都将非常感激！

这是我基于以下工作的例子：

这是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项，而是获取最接近点击链接的项目。

JQuery多个翻盖面板

1 个答案: