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

Question

我有一个修改过的 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/

谢谢。

Answer 1

这是因为当你点击.flip元素时，类又被加回来了。仅在单击卡片正面时添加 flipped 类，以防止在单击背面时添加它。

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

Updated Example

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


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