調整jquery.flip切換按鈕點擊

Question

我正在學習jquery，我試圖讓這個翻轉插件通過按下一個按鈕切換翻轉和未翻轉的設置，但目前我不能解決如何適應手動觸發來做到這一點。

http://nnattawat.github.io/flip/

下面是相關代碼：

<script type="text/javascript"> 
    $(function(){ 


    $("#card-4").flip({ 
     trigger: 'manual' 
    }); 

    $("#flip-btn").click(function(){ 
     $("#card-4").flip(true); 


    }); 

    $("#unflip-btn").click(function(){ 
     $("#card-4").flip(false); 
    }); 
    }); 
</script> 

什麼是做到這一點的最好方法是什麼？我試圖重新編寫代碼，以便它會詢問翻轉是否爲真，如果是，則單擊一個按鈕會使翻轉錯誤。

最佳，

西蒙

Answer 1

我下載插件，並在我的環境設置。我在bootstrap v3.3.4和jQuery v2.1.3。我能得到它在我的環境做這個工作：

HTML

<div class="row"> 
    <div class="col-md-6"> 

     <div id="card-4"> 
      <div class="front"> 
       Front content 
      </div> 
      <div class="back"> 
       Back content 
      </div> 
     </div> 

    </div> 
    <div class="col-md-6"> 
     <button class="btn btn-success" id="flip-btn">Click to FLIP</button> 
    </div> 

</div><!-- /.row --> 

JQUERY

<script> 
    $("#card-4").flip({ 
     trigger: "manual" 
    }); 

    $(document).on("click", "#flip-btn", function() { 
     $("#card-4").flip(true); 
     $(this).attr("id","unflip-btn").text("Click to UNFLIP").removeClass("btn-success").addClass("btn-danger"); 
    }); 

    $(document).on("click", "#unflip-btn", function() { 
     $("#card-4").flip(false); 
     $(this).attr("id","flip-btn").text("Click to FLIP").removeClass("btn-danger").addClass("btn-success"); 
    }); 
</script> 

希望這有助於。否則，將JS和HTML放入JSFiddle中，以便我們可以更好地診斷問題。