切换按钮点击

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

但它所做的只是在单击时翻转元素。因此，默认触发器是 'click' 事件。

我希望通过单击按钮而不是单击 div 本身来实现相同的功能。

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

一切（翻转）工作正常。我想要的只是在单击按钮时触发翻转。 link: 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>

错误：未捕获类型错误：$(...).flip 不是函数

:

Answer 1

您可以通过将点击事件挂接到该按钮并在事件处理程序中调用 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();
});

Answer 2

请查看此演示：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');
  });
});

切换按钮点击

Toggle on button click

html

javascript

jquery

frontend