javascript - 如何翻转元素 onclick 按钮？

Question

我正在使用 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>

Answer 1

因为card-1是div的id。您需要从此更改您的 id 选择器

 $("#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({