时间戳

首页 > 解决方案 > How to Separate each Card from simultaneously flipping back together

jquery - How to Separate each Card from simultaneously flipping back together

问题描述

Hello I created an events card that rotates when you click/hover the card and rotates back when you click the arrow left icon at the back. The action is okay but when I click on the next card the previous card is still rotating . I just need to separate the actions on each of the card, since when you click one card the action seems to follow on the other cards. https://jsfiddle.net/89c76wpx/ enter image description here

This is the html structure of each of the card, to distinguish each of the card I added an id=card1 id=card2 etc.

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

标签： jquerycss

解决方案

您需要在此处参考：

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

这样你就告诉 jQuery 找到最近的具有 card 类的父级并从中删除 myclass ，这样应该可以解决上述错误。

推荐阅读