Question

我有一个jQuery动画，可以变成一张闪卡。这是HTML：

<div class="stage">
<div class="flashcard">
  <div class="front">
    <p>Front</p>
  </div>
  <div class="back">
    <p>Back</p>
  </div>
</div>

这是我的CSS：

 .stage {
    -webkit-perspective: 1000;                
}

.flashcard {
    height: 300px;
    width: 500px;
    margin: 10% auto;                                             
    border: 1px solid gray;                          
    box-shadow: 2px 2px 2px #000;
    -webkit-transform-style: preserve-3d;                                
    transition: all 0.3s;                               
    -webkit-transition: all 0.3s;
}

.flipped, .back {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);                     
}

.front, .back {
    position: absolute;
    -webkit-backface-visibility: hidden;           
    height: 300px;                                  
    width: 500px;
    text-align: center;
}

.front p, .back p {
    margin-top: 25%;
    font-size: 3em;
}

这是我的jQuery代码：

$(document).ready(function() {
$('.flashcard').on('click', function() {
$('.flashcard').toggleClass('flipped');
});
});

我使用PHP创建了一个For循环来循环我的HTML代码，因此它可以一次显示多个闪卡。问题是，如果我点击一张随机闪卡，所有的闪卡都会立即转动。

我需要更改代码以确保只有点击的闪卡转过来？

Answer 1

尝试在$(this)功能上使用$(".flashcard")而非toggleClass()。因为在你的脚本上，你实际上是在切换所有类。使用它来触发要触发的特定元素上的事件。

Answer 2

这是一个有效的代码 http://codepen.io/mozzi/pen/akwVrg

我已将javascript更改为

$(document).ready(function() {
$('.flashcard').on('click', function() {
$(this).toggleClass('flipped');
});
});

如何单独为Jquery对象设置动画

2 个答案: