jquery - 如何将每张卡片分开同时翻转回来

Question

您好，我创建了一个事件卡片，当您单击/悬停该卡片时它会旋转，当您单击后面的向左箭头图标时会旋转回来。 Action 没问题，但是当我点击下一张卡片时，前一张卡片仍在旋转。我只需要将每张卡片上的操作分开，因为当您单击一张卡片时，其他卡片上的操作似乎也会随之而来。 https://jsfiddle.net/89c76wpx/

这是每张卡片的html结构，为了区分每张卡片我加了一个id=card1 id=card2等

<div class="card col">
      <input type="checkbox" id="card1" class="more" aria-hidden="true">  
        <div class="content">

           <div class="front" style="background-image: url('https://cdn2.hubspot.net/hubfs/1943696/Tile%20Event%20Pictures/800px_chicago_skylin_N5DSy.jpg')">
                <div class="inner">
                    <h2>Chicago Events</h2>
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <label for="card1" class="button" aria-hidden="true">
                      Discover
                    </label>
                </div>
            </div>

            <div class="back">
                <div class="inner">
                    <div class="info">
                         <!-- <i class="fa fa-calendar"></i> -->
                        <span>Month</span>
                        <div class="icon">


                        </div>
                    </div>
                    <div class="info">
                        <span>Event Type</span>
                        <div class="icon">
                            <!-- <i class="fa fa-door-open"></i> -->

                        </div>
                    </div>
                    <div class="info">
                       <!--  <span>Event</span> -->
                        <div class="icon">
                           <!--  <i class="fa fa-bed"></i>
                             -->
                        </div>
                    </div>

                    <div class="description">
                        <ul>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Sep</span> Fall Whiskey</a> </li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Oct</span> Halloween Bar Crawl Fri & Sat </a> </li>
                        <li  class="btn draw-border"><a href="" target="_blank"> <span>Dec</span> NYE Bar Crawl </a></li>
                        <li  class="btn draw-border"><a href="" target="_blank"> <span>Dec</span> NYE Yacht </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Jan</span> Winter Whiskey </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Feb</span> Winter Tequila </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Mar</span> St Patrick's Bar Crawl </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Jun</span> Summer Whiskey </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Jul</span> Summer Tequila </a></li>
                        <li class="btn draw-border"><a href="" target="_blank"> <span>Aug</span> Air Show Yacht Party </a> </li>
                        </ul>

                    </div>
                    <div class="location">Chicago Events </div>
                    <div class="price">2019-2020</div>
                    <label for="card1" class="button return" aria-hidden="true">
                        <i class="fa fa-arrow-left"></i>
                    </label>
                </div>
            </div>

        </div>
    </div> 

    $(".return").click(function(e){
    $(".card").addClass("myclass");
    });
   $(".return").mouseout(function(e){
    $(".card").removeClass("myclass");
    })

Answer 1

你需要在这里引用它:

$(".return").mouseout(function(e){
    $(this).closest(".card").removeClass("myclass");
})

通过这种方式，您告诉 jQuery 找到最近的具有卡片类的父级并从中删除 myclass，这样应该可以修复上述错误。