Toggle on Button klicken

Question

Ich bin neu in der Web-Entwicklung. Und ich stecke mit einem Problem fest. Ich habe eine Flip-Funktionalität implementiert. Wo, wenn ich auf das div klicke, kippt das Element. Unten ist was ich versucht habe.

<div class = "flip" id = "flip"> 
    <div class = "front"> 
     <div id = "chartAnchor1" class="x_content"> 
     </div> 
    </div> 
    <div class = "back"> 
     <div id = "abcanchor1" class="x_content"> 
     </div> 
    </div> 
</div> 

Hier abcanchor1 und chartanchor sind der Anker, wo die eigentliche Vorlage eingebettet ist. Ich benutze https://nnattawat.github.io/flip/ Plug-in zu implementieren Flip. Derzeit kann ich spiegeln, wenn das div geklickt wird. Aber ich möchte, dass dies auf Knopfdruck geschieht.

-Code leicht zu schlagen:

$("#flip").flip(); 

Aber es ist nicht, dreht sie das Element, wenn angeklickt. Der Standardauslöser ist also ein "Klick" -Ereignis.

Ich möchte die gleiche Funktionalität zu funktionieren, indem Sie auf eine Schaltfläche klickt, anstatt auf das div selbst zu klicken.

<button type="button" id = "toggle" class = "toggle">Click Me!</button>

Alles (Flip) funktioniert gut. Alles, was ich will, ist das Auslösen der Klappe bei einem Klick auf die Taste. Es ist in diesem Link angegeben: https://nnattawat.github.io/flip/ auf wie Sie die Flip (Toggle) auf Knopf klicken, aber ich bin nicht in der Lage, das zu implementieren. Kann mir jemand helfen?

EDIT

<script> 
$(function() 
{ 
     $("#flip").flip({ 
    trigger: 'manual' 
}); 
     $('#toggle').click(function() { 
    $("#flip").flip('toggle'); 
}); 
}); 
</script> 

Fehler: Wenn die Schaltfläche geklickt wird bekomme ich diese Fehler

firstDashboard.html:34 Uncaught TypeError: $(...).flip is not a function 

EDIT 2:

Codebasis:

<button type="button" id = "toggle" class = "toggle">Click Me!</button> 

    <div class = "flip" id = "flip"> 
     <div class = "front"> 
      <div id = "chartAnchor1" class="x_content"> 
      </div> 
     </div> 
     <div class = "back">       
      <div id = "abcanchor1" class="x_content"> 
      </div> 
     </div> 
    </div> 

<script src="../Scripts/jquery.flip.js"></script> 
<script> 
$(function() 
{ 
    $("#flip").flip({ 
    trigger: 'manual' 
}); 
    $('#toggle').click(function() { 
    $("#flip").flip('toggle'); 
}); }); 
</script> 

Fehler: Uncaught Typeerror:. $ (...) Flip ist keine Funktion

:

Answer 1

Bitte überprüfen Sie diese Demo: https://jsfiddle.net/hv83LLbw/

Sie müssen Trigger manual einzustellen:

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

und dann an das Click-Ereignis Handhabung:

$('#toggle').click(function() { 
    $("#flip").flip('toggle'); 
}); 

Die über alle

$(document).ready(function() { 
    $("#flip").flip({ 
    trigger: 'manual' 
    }); 
$('#toggle').click(function() { 
    $("#flip").flip('toggle'); 
    }); 
}); 

Answer 2

Sie können dies tun, indem Sie ein Click-Ereignis auf diese Schaltfläche Einhaken und ruft flip() innerhalb der Event-Handler, wie folgt aus:

<div class="flip" id="flip"> 
    <div class="front"> 
     <div id="chartAnchor1" class="x_content"></div> 
    </div> 
    <div class = "back"> 
     <div id="abcanchor1" class="x_content"></div> 
    </div> 
</div> 
<button type="button" id="toggle" class="toggle">Click Me!</button> 

$('#toggle').click(function() { 
    $('#flip').flip(); 
});