Как отделить каждую карту от одновременного слияния

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");
        }
    })
});

Пример демонстрации

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

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

// Или

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