如何翻转元素onclick按钮?

时间:2015-05-06 03:39:39

标签: javascript jquery html

我正在使用jquery flip.js来翻转元素。但是当我点击div元素时,div会被翻转。但是我需要在点击翻转按钮时翻转元素,然后在点击翻转按钮时再次翻转。

我该怎么做?

    <div id="card-1" class="card">
  <div class="front">
      Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean.
      <button id="flip-card1">Flip</button>
  </div>
  <div class="back">
      <a href="http://google.com">link</a>
      Back: Dolor scelerisque ridiculus! Mus? Augue, montes, montes proin rhoncus vel a parturient dapibus eros? Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis.
      <button id="flipback-card1">Flip Back</button>
  </div>
</div>    

<script type="text/javascript">
$(function(){
  $("#card-1").flip({
    axis: "y", // y or x
    reverse: false, // true and false
    trigger: "click", // click or hover
 });
});
</script>

2 个答案:

答案 0 :(得分:2)

因为card-1是div的id。您需要从此

更改id selector
 $("#card-1").flip({//this is the id of the div

 $("#flip-card1").flip({//this is the id of the button

您也可以尝试

 $("#card-1").find('button').flip({

答案 1 :(得分:0)

不熟悉flip.js,但你可以用以下内容完成同样的事情......

-\s*(\w+)