切换按钮单击

Question

我是网络开发的新手。而且我遇到了一个问题。我实现了翻转功能。如果我点击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/关于如何在按钮单击上实现翻转（切换）但我无法实现。有人可以指导我。

修改

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

错误：点击该按钮时出现此错误

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

编辑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：

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

然后附加了点击事件处理：

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

全部

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

Answer 2

您可以通过将click事件挂钩到该按钮并在事件处理程序中调用flip()来完成此操作，如下所示：

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