twitter-bootstrap - 带有 css3 转换的 Bootstrap 翻转卡

Question

我想使用 CSS3 转换创建一个引导翻转卡。我确实从这个工作和基本示例开始

但是我想修改它以拥有一个固定高度的卡片和一些小的增强。特别是当用户单击我在右上角创建的图标时，我需要翻转卡片。

我已经修改了代码，你可以在这里看到。

问题是卡在正确翻转到背面后没有翻转回正面。

任何人都可以提出任何解决方案吗？

注意： 问题似乎出在 jquery 代码上。其实我有

$('div.flipControl').on('click', function () {
    $(this).closest('div[class="card"]').toggleClass('flipped');
});

但如果我改变它

$('div.flipControl').on('click', function () {
    $(this).parent().parent().parent().toggleClass('flipped');
});

一切都按预期工作。

Answer 1

我认为直接使用 CSS 类选择器要简单得多

$('.flipControl').on('click', function(){
    $(this).closest('.card').toggleClass('flipped');

});

演示