Question

我发现这个样本看起来不错，所以我从bootstrap中放了一个缩略图。

http://www.bootply.com/129165

我喜欢将它实施到我正在开发的网站上。

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

由于

 <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

像这样改变JQuery代码

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

});

并为翻转操作按钮提供一个自定义类名称，例如'fliper-btn'，然后像这样添加

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

Answer 2

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

通过按钮点击翻转缩略图

2 个答案: