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

Question

I have a modified css3 flip div demo which I am having problems with. I can make the div flip no problem and display the other side but my back side doc which has a cross to 'close' the div (basically remove the class) never works. Can someone see what I am doing wrong or point me in the right direction

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

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

Thank you.

Answer 1

It's because when you click on the .flip element, the class is added back again. Only add the class flipped when clicking on the front of the card in order to prevent it from being added when clicking the back.

In addition, you were trying to remove the class .flipped from the .flip element, meanwhile the class is on the .card element. Just target the .flipped element instead.

Updated Example

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


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

Answer 2

It should be $(this).closest('.flip') . You missed the dot.

You should also remove the class from $(this).closest('.card')