Question

我的挑战是我有两排要独立翻转的盒子。不能使用悬停功能，因为对于某些用户而言，这在视觉上太混乱了。因此，我有一个JQuery脚本，可在类（但BUT）之间进行切换，当将其应用于多个框时，我会一次打开所有框。我希望只能像悬停效果一样翻转被点击的那个。如果给每个框一个单独的类，就可以实现这一点，但是那会增加很多CSS，而且我知道必须有一种更好，更清洁的方法。请帮忙。：）

这是jquery代码：$（'。card'）是我想使用的而不是（'cardOne'，'。cardTwo'等）

function flip() {
        $('.card').toggleClass('flipped');
    }

这是CSS（太麻烦了）：

.container {
   width: 200px;
   height: 200px;
   position: relative;
   border: 1px solid #ccc;
   -webkit-perspective: 800px;
   -moz-perspective: 800px;
   -o-perspective: 800px;
   perspective: 800px;
}
.cardOne, .cardTwo, .cardThree, .cardFour, .cardFive, .cardSix,    .cardSeven, .cardEight  {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.cardOne div {
   display: block;
   height: 100%;
   width: 100%;
   /*line-height: 200px;*/
   color: #000;
   text-align: center;
   /*font-weight: bold;*/
   font-size: 18px;
   position: absolute;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;
}
.cardOne .front, .cardTwo .front, .cardThree .front, .cardFour .front, .cardFive .front, .cardSix .front, .cardSeven .front, .cardEight .front {
   background: #9ddae5;
   line-height: 180px;
}
.cardOne .back, .cardTwo .back, .cardThree .back, .cardFour .back, .cardFive .back, .cardSix .back, .cardSeven .back, .cardEight .back {
   background: blue;
   line-height: 18px;
   -webkit-transform: rotateX( -180deg );
   -moz-transform: rotateX( -180deg );
   -o-transform: rotateX( -180deg );
   transform: rotateX( -180deg );
}
.cardOne.flipped, .cardTwo.flipped, .cardThree.flipped, .cardFour.flipped, .cardFive.flipped, .cardSix.flipped, .cardSeven.flipped, .cardEight.flipped {
   -webkit-transform: rotateX( -180deg );
   -moz-transform: rotateX( -180deg );
   -o-transform: rotateX( -180deg );
   transform: rotateX( -180deg );
}

然后是HTML（当然，我将其切成两个方框）：

<div class="container">                
            <div class="cardOne" onclick="flipOne()">
                <div class="front">
                    <!-- front content -->
                    <p>anxiety</p>
                </div>
                <div class="back">
                    <!-- back content -->                        
                    <p>Occasional anxiety is a normal part of life. You might feel anxious when faced with a problem at work, before taking a test, or making an important decision. But anxiety disorders involve more than temporary worry or fear.  </p>

                </div>
            </div><!-- end flipper -->

        </div>
    </div> <!-- end col-1 -->

    <div class="col-1">   
        <div class="container">
            <div class="cardTwo" onclick="flipTwo()">
                <div class="front">
                    <!-- front content -->
                    <p>infertility</p>
                    </div>
                <div class="back">
                    <!-- back content -->
                    <p>Grief is a real part of infertility. It may be heightened in miscarriages or stillbirths, but it is just as real when a couple cannot conceive.</p>

                </div>
            </div>
        </div>
    </div><!-- end col-1 -->

Answer 1

使用以下内容：

$('.container').on('click', '.card', function(){
  $(this).toggleClass('flipped');
});

使用此逻辑，我们用脚本将事件处理程序绑定到卡的父容器。每次点击卡片时，都会在被点击的卡片上切换翻转的类别。

$('.container').on('click', '.card', function() {
  $(this).toggleClass('flipped');
});

.card {
 display: inline-block;
 min-width: 100px;
 min-height: 80px;
 border: 1px solid black;
}

.card.flipped { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="card"></div>
  <div class="card"></div>
</div>

Answer 2

尝试一下：

$('.card').on('click', function() {
    $(this).toggleClass('flipped');
}

您将只需要一个类.card来减少写操作，等等。

Ps：删除函数小数并用上面的代码替换，并从onclick="flip()"中删除所有HTML。

多个翻转框-但仅翻转一个单击的框

2 个答案: