ボタンをクリックして切り替えます

Question

私はWeb開発を初めて利用しています。そして、私は1つの問題で立ち往生しています。私はフリップ機能を実装しました。 divをクリックすると、要素が反転します。以下は私が試みたものです。

<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> 

ここabcanchor1とchartanchorは、実際のテンプレートが埋め込まれたアンカーです。私はフリップを実装するためにプラグインhttps://nnattawat.github.io/flip/を使用しています。 現在、divをクリックしたときに反転できます。しかし、私はそれがボタンクリックで起こることを望みます。

反転するコード：

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

しかし、それはないすべての時にクリックされたとき、それは要素を反転させ、です。したがって、デフォルトのトリガーは 'クリック'イベントです。

私は、div自体をクリックするのではなく、ボタンをクリックして同じ機能を動作させたいと考えています。

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

すべて（フリップ）が正常に動作しています。私が望むのは、ボタンをクリックするだけでフリップをトリガーすることです。このリンクには：https://nnattawat.github.io/flip/ボタンのクリックでフリップ（トグル）を実装する方法が記載されていますが、実装できません。誰かが私を導くことができる？

EDIT

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

エラー：ボタンをクリックすると、私はこのエラーを取得する

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

EDIT 2：

コードベース：

<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> 

エラー：キャッチされない例外TypeError：$（...）フリップは機能

ではありません。

あなたは、そのボタンにクリックイベントをフックし、内 flip()を呼び出すことによってこれを行うことができます

Answer 1

はこのデモをご確認ください：https://jsfiddle.net/hv83LLbw/

あなたはmanualにトリガを設定する必要があります。答えのためのすべての

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

Answer 2

このようなイベントハンドラ、：

<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(); 
});