javascript - 通过单击按钮翻转缩略图

Question

我找到了这个示例，它看起来不错，所以我从 bootstrap 中放了一个缩略图。

http://www.bootply.com/129165

我喜欢在我开发的网站上实现它。

http://hotmeltcoatingmachines.com/

我想要的是通过单击按钮翻转缩略图。我怎样才能做到这一点。

谢谢

 <div class="flip">
    <div class="card"> 
      <div class="face front"> 
        <div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
    <h3>front</h3>
    <p>...</p>
    <p><a href="#" class="btn btn-primary" role="button">Flip</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>
      </div> 
      <div class="face back"> 
        <div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
    <h3>back</h3>
    <p>...</p>
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">flip</a></p>
  </div>
</div>
      </div>
    </div>   
  </div>
</div>

示例代码 http://www.bootply.com/pZXSuyPPWx

Answer 1

@menaka 的回答将翻转所有图标。如果你只想翻转被点击的图标，那么使用如下的东西:

$('.fliper-btn').click(function(e){

    $(e.target).closest('.flip').find('.card').toggleClass('flipped');

});

确保按照@menaka 的建议保留自定义类 fliper-btn。

<a href="#" class="btn btn-primary fliper-btn" role="button">Flip</a>