调整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中，以便我们可以更好地诊断问题。