jQuery函数在单击时翻转图像

我已经写了一些css来翻转图像。它工作正常，但我想将其转换为函数，以便在

onclick

事件中调用该函数

到目前为止，我的演示可以在这里找到：

以下是图像的HTML：

<div class="f1_container">
    <div class="shadow f1_card">
        <div class="front face">
            <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" />
        </div>
        <div class="back face center">Some text inside here</div>
    </div>
</div>

---

将此项添加到当前解决方案非常简单：

CSS

将

：hover

状态替换为类：

.f1_container:hover .f1_card {}
/* becomes */
.f1_container.active .f1_card {}

JavaScript

添加此JavaScript部件，用于在单击时切换新类：

$('.f1_container').click(function() {
    $(this).toggleClass('active');
});

演示

---

我在我的网站上将此CSS用作主页上的内容“滑块”。好东西。

$('.f1_container').click(function() {
    $(this).toggleClass('active');
});