Адаптация 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> 

Что такое лучший способ сделать это? Я пытался переписать код так, чтобы он спросил, было ли flip истинным, и если бы это было, тогда нажатие кнопки сделало бы его ложным.

Бест,

Simon

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, чтобы мы могли лучше диагностировать проблему.