带有 css3 转换的 Bootstrap 翻转卡

Question

我想使用 CSS3 转换创建一个引导翻转卡片。 我确实是从这个working and basic example开始的

但是我想对其进行修改，使其具有固定高度的卡片和一些小的增强功能。特别是当用户单击我在右上角创建的图标时，我需要翻转卡片。

我已经修改了代码，你可以看到here。

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

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

注意： 问题似乎出在 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');

});

demo