javascript - 如何循环显示特定项目

Question

我有三个 div。每个 div 中都有一个按钮。我希望当我按下 div 的按钮时，它会在按钮所在的同一个 div 上显示另一个 div。我尝试了一段代码，但是当我点击一个div的按钮时，它同时显示三个div。

这里是html代码(这只是一个div，其中的div是我点击时必须出现的，所以像这样的代码共有三段。):

$(document).ready(function() {
  $(".my-btn").click(function() {
    $(".card").each(function() {
      $(this).toggleClass("card-verso-effect");
    });
  });
});

    .card {
        margin-top: 50px;
        text-align: center;
        box-shadow: 2px 2px 5px 0px lightgrey;
        transition: all .2s ease-in-out;
        }
        .card:hover, .card-verso:hover {
            box-shadow: 2px 2px 5px 0px lightblue;
        }
        .card > .card-verso {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity .2s ease-in-out;
        }
        /* Effect */
        .card-verso-effect .card-verso {
            opacity: 1;
            visibility: visible;
            height: 150%;
            background-color: white;
            z-index: 3;
        }
        @media screen and (max-width: 678px) {
            .card-verso-effect {
                margin-top: 50%;
            }
        }
        h5 {
            margin-bottom: 30px;
        }
        .circle {
            margin-left: auto;
            margin-right: auto;
            background-color: transparent !important;
            border: 2px solid violet;
        }
        p {
            margin-top: 30px;

        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="section-title">
<h1>Notification Centre</h1>
</header>

<div class="container notification-centre">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
<div class="card-deck">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Items to review</h5>
            <div class="circle">10</div>
            <p class="card-text">Here you can find items in your plan that are due for review.</p>
            <input type="button" class="btn next-btn my-btn" value="view">
        </div>
        <div class="card-body card-verso">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <ul class="list-group list-group-flush">
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
            </ul>
            <input type="button" class="btn next-btn my-btn" value="back">
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Items to review</h5>
            <div class="circle">10</div>
            <p class="card-text">Here you can find items in your plan that are due for review.</p>
            <input type="button" class="btn next-btn my-btn" value="view">
        </div>
        <div class="card-body card-verso">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <ul class="list-group list-group-flush">
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
            </ul>
            <input type="button" class="btn next-btn my-btn" value="back">
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Sections to add</h5>
            <div class="circle">1</div>
            <p class="card-text">Here you can see which sections of your plan still need items to add.</p>
            <input type="button" class="btn next-btn my-btn" value="view">
        </div>
        <div class="card-body card-verso">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <ul class="list-group list-group-flush">
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
                <div class="row">
                    <li class="col list-group-item">Cras justo odio</li>
                    <input type="button" class="col-auto btn menu-btn" value="review">
                </div>
            </ul>
            <input type="button" class="btn next-btn my-btn" value="back">
        </div>
    </div>
    
</div>
</div>

Answer 1

你的意思是这样吗？ (在按钮所在的 .card 上切换 .card-verso-effect)

$(document).ready(function(){
        $( ".my-btn" ).click(function() {
            $(this).closest(".card").toggleClass("card-verso-effect");
        });
    });