爲CSS3翻轉動畫選擇特定元素的jQuery問題？

Question

我有一個修改後的css3翻轉div演示，我遇到了問題。我可以讓div翻轉沒有問題，並顯示另一面，但我的背面doc有一個交叉'關閉'的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'); 
}); 

Answer 2

應該$(this).closest('.flip')。你錯過了點。

您還應該從$(this).closest('.card')刪除班級