如何翻轉元素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

因爲是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({ 

Answer 2

不熟悉flip.js，但你可以做到同樣的事情與以下...

$(function() { 
    $("#card-1 .back").hide(); 
    $("#flip-card1").click(function() { 
     $("#card-1 .front").hide(); 
     $("#card-1 .back").show(); 
    }); 
    $("#flipback-card1").click(function() { 
     $("#card-1 .front").show(); 
     $("#card-1 .back").hide(); 
    }); 
});