javascript - Extent翻转卡片功能——Jquery

Question

目前我面临的问题是每个按钮都会触发两张卡片翻转。但是，我的目标是让每个按钮仅翻转适当的卡片(而不是同时翻转)。是否可以在我想要的任意多张卡片上扩展此 jquery 函数？

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

非常感谢任何提示。

问候

.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" 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>

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>