0

1ページに複数のフリップカードを作ろうとしています。内部のリンクをクリックすると、各カードがアクティブになります。私はこれが機能しています。しかし、複数の「カード」を作成すると、すべてが反転します。私はイベント ハンドラ構造を調べてきましたが、明らかに頭がいっぱいです。どんな助けでも大歓迎です！

これは、私がこの作業の基にしている例です。

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/

4

1 に答える 1

1

それ以外の

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

使用する：

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

この更新された jsFiddleを参照してください。

これが行うことは、すべての項目を選択する代わりに.card、クリックされたリンクに最も近い項目を取得することです。

于 2013-08-13T23:52:52.877 に答える