范围翻转卡功能 - Jquery

Question

目前我遇到的问题是每个按钮都会触发两张卡片翻转。但是，我的目标是每个按钮只翻转相应的卡（不是两个）。是否可以在我想要的卡上扩展这个.wrappercard { width: 285px; height: 350px; margin-top: 50px; margin-left: 50px; } .containercard { height: 330px; width: 285px; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } .card { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .card div { height: 100%; width: 100%; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .card.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } /* Front Styling */ .card .front { background: white; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8); border-radius: 5px; } /*Back Styling*/ .card .back { background: white; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8); border-radius: 5px; -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); overflow: hidden; } /*Button flip*/ .btnflip { border: none; background: none; margin-left: 50%; transform: translate(-50%); width: 100%; margin-top: 10px; font-size: 14px; font-weight: lighter; cursor: pointer; padding: 3px 20px 3px 20px; box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.20); border-radius: 4px; transition: 0.3s ease-in-out; } .btnflip:hover { background-color: white; box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.80); transition: 0.3s ease-in-out; } .btnflip:focus { outline: none; }功能？

我希望在查看代码段时我的问题会变得清晰。

任何提示都受到高度赞赏。

问候

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrappercard"> 
        <section class="containercard">
            <div class="card">
                <div class="front">
                  Hello 
                </div>
                
                <div class="back">
                  Bye
                </div>
            </div>
        </section>
        <button class="btnflip" onclick="flip()">Anfragen</button>    
    </div>
        
        
    <div class="wrappercard">
        <section class="containercard">
            <div class="card">
                <div class="front">
                   Hello
                </div>
                
                <div class="back">
                   Bye
                </div>
            </div>
        </section>
        <button class="btnflip" onclick="flip()">Anfragen</button>    
    </div>
        
        <script>
            function flip() {
                $('.card').toggleClass('flipped');
            }
        </script>

＆＃13;

jQuery.post

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你通过jquery添加事件处理程序，那么你会得到this，这是点击的按钮。

 <button class="btnflip">Anfragen</button>   

然后您可以使用相对路径遍历来查找相关卡片：

$(function() { 
    $(".btnflip").click(function() {
        $(this).closest(".wrappercard").find('.card').toggleClass('flipped');
    })
});

$(function() { 
        $(".btnflip").click(function() {
            $(this).closest(".wrappercard").find('.card').toggleClass('flipped');
        })
    });

.wrappercard {
    width: 285px; 
    height: 350px; 
    margin-top: 50px;
    margin-left: 50px;
}

.containercard {
    height: 330px;
    width: 285px; 
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}

.card div {
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

/* Front Styling */ 
.card .front {
    background: white;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8); 
    border-radius: 5px;
}

/*Back Styling*/
.card .back {
    background: white;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8); 
    border-radius: 5px;
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
    overflow: hidden;
}

/*Button flip*/ 
.btnflip {
    border: none; 
    background: none;
    margin-left: 50%; 
    transform: translate(-50%); 
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    font-weight: lighter; 
    cursor: pointer;
    padding: 3px 20px 3px 20px;
    box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.20);
    border-radius: 4px;
    transition: 0.3s ease-in-out;
}

.btnflip:hover {
    background-color: white; 
    box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.80);
    transition: 0.3s ease-in-out;
    
}

.btnflip:focus {
    outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrappercard"> 
        <section class="containercard">
            <div class="card">
                <div class="front">
                  Hello 
                </div>
                
                <div class="back">
                  Bye
                </div>
            </div>
        </section>
        <button class="btnflip">Anfragen</button>    
    </div>
        
    <div class="wrappercard">
        <section class="containercard">
            <div class="card">
                <div class="front">
                   Hello
                </div>
                
                <div class="back">
                   Bye
                </div>
            </div>
        </section> 
        <button class="btnflip">Anfragen</button>    
    </div>