javascript - jQuery问题为CSS3翻转动画选择特定元素？

我有一个修改过的css3 flip div演示，遇到了问题。我可以使div翻转没有问题并显示另一侧，但是我的背面文档带有一个“关闭” div的叉（基本上删除了该类）永远无法工作。有人可以看到我做错了什么，还是可以将我指向正确的方向

$('.close-face').on('click', function(){
    var card = $(this).closest('flip');
    alert(card.html());
    card.removeClass('flipped');
});

http://jsfiddle.net/GDdtS/10424/

谢谢。

最佳答案

这是因为当您单击.flip元素时，该类又被添加回去。仅在单击卡的正面时添加类别flipped，以防止在单击背面时添加该类别。

另外，您试图从.flipped元素中删除类.flip，同时该类位于.card元素上。只需定位.flipped元素即可。

Updated Example

$('.flip .front').on('click', function() {
  $(this).closest('.card').addClass('flipped');
});


$('.close-face').on('click', function() {
  $(this).closest('.flipped').removeClass('flipped');
});