jQuery翻转插件切换功能在开关上失败

Question

我有一段代码,我有两个按钮,当我按下一个按钮时,我想要一个div在y轴上翻转,当我按下另一个按钮时,我希望相同的div在x轴上翻转.即使前一个翻转位于x轴上,当我使用y轴按钮时,这也可以正常工作.但是当我想从y轴切换到x轴时,我需要按两次x按钮,因为第一次没有任何反应.

所以期望的行为是:

单击y按钮在y轴上翻转div.

单击x按钮在x轴上翻转div.

目前的行为是:

单击y按钮div翻转y轴.

单击x按钮没有任何反应单击x按钮再次在x轴上翻转div.

我不知道问题是什么,这是我到目前为止所做的最好的.所有帮助表示赞赏.

var ax = 'x';
$(document).ready(function() {

  $('#card').flip({
    trigger: 'manual',
    axis: 'x'
  });
  $('#left').click(function() {
    if (ax != 'y') {
      $("#card").flip({
        axis: 'y'
      });
      $("#card").on('flip:change', function() {
        $('#card').flip('toggle');
      });
      ax = 'y';
    } else {
      $("#card").flip('toggle');
    }
  });
  $('#right').click(function() {
    if (ax != 'x') {
      $("#card").flip({
        axis: 'x'
      });
      $("#card").on('flip:change', function() {
        $('#card').flip('toggle');
      });
      ax = 'x';
    } else {
      $("#card").flip('toggle');
    }
  });
});

#card {
  position: fixed;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
}

.front {
  width: 100%;
  height: 100%;
  background-color: red;
}

.back {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
  <div class="front">Front content</div>
  <div class="back">Back content</div>
</div>

Answer 1

给你一个解决方案

var ax = 'x';
$(document).ready(function() {

  $('#card').flip({
    trigger: 'manual',
    axis: 'x'
  });
  
  
  $("#card").on('flip:change', function() {
    $('#card').flip('toggle');
  });
  
  $('#left').click(function() {

    if (ax != 'y') {
      $("#card").flip({
        axis: 'y'
      });
      
      ax = 'y';
    } else {
      $("#card").flip('toggle');
    }
  });
  $('#right').click(function() {
    if (ax != 'x') {
      $("#card").flip({
        axis: 'x'
      });
      
      ax = 'x';
    } else {
      $("#card").flip('toggle');
    }
  });
});

#card {
  position: fixed;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
}

.front {
  width: 100%;
  height: 100%;
  background-color: red;
}

.back {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
  <div class="front">Front content</div>
  <div class="back">Back content</div>
</div>

您应该将其保留flip:change在点击事件之外。

希望对你有帮助。