通过单击按钮调整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上。我能够让它在我的环境中工作：

<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中，这样我们就可以更好地诊断问题。