Question

您好，我创建了一个事件卡，当您单击/悬停该卡时，该卡将旋转；当您单击背面的向左箭头图标时，该卡将向后旋转。动作还可以，但是当我单击下一张卡时，上一张卡仍在旋转。我只需要对每张卡进行单独的操作，因为当您单击其中一张卡时，其他卡上的操作似乎也会随之发生。 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，这样就可以解决上述错误。

Answer 2

$(function () {
    $(".return").data('clicked', false);

    $(".return").click(function (e) {
        $(this).data('clicked', !$(this).data('clicked'));
        ////$(this).closest(".card").toggleClass("myclass", $(this).data('clicked')==true);

        if ($(this).data('clicked') == true) {
            $(this).closest(".card").addClass("myclass");
        } else {
            $(this).closest(".card").removeClass("myclass");
        }
    });

    $(".return").mouseout(function (e) {
        if ($(this).data('clicked') != true) {
            $(this).closest(".card").removeClass("myclass");
        }
    })
});

Sample Demo

// =========================================== //

$(".return").click(function(e){
    $(this).closest(".card").addClass("myclass");
});

//或

$(".return").click(function(e){
    $(this).parents(".card").addClass("myclass");
});

如何将每张卡分开同时翻转

2 个答案: