通过点击按钮翻转缩略图

flip thumbnail via button click

本文关键字：翻转 略图 按钮      更新时间：2023-09-26

我发现了这个示例，它看起来不错，所以我放了一个来自引导程序的缩略图。

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

@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>

像这个一样更改JQuery代码

$('.fliper-btn').click(function(){
    $('.flip').find('.card').toggleClass('flipped');
});

给翻转动作按钮一个自定义类名，比如"flipper-btn"，然后像这个一样添加它

<a href="#" class="btn btn-primary fliper-btn" role="button">Flip</a>
相关文章：