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

通过按钮点击

1 个答案: