Question

我有一段代码，我有两个按钮，当我按下一个按钮时，我想在y轴上翻转div，当我按下另一个按钮时，我希望在x轴上翻转相同的div 。即使前一个翻转位于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

你过分复杂了这个问题。这是一个受documentation启发的解决方案。您所要做的就是在点击按钮时调用flip来更改轴，并在每次拨打flip:change以更改方向时调用flip事件。为了实际翻转它。

＆＃13;

// Configure it to be manually flipped
$("#card").flip({
  trigger: 'manual'
});

// Change the axis
$('#left').click(function() {
  $("#card").flip({
    axis: 'y'
  });
});

$('#right').click(function() {
  $("#card").flip({
    axis: 'x'
  });
});

// Toggle it on change
$("#card").on('flip:change', function() {
  $('#card').flip('toggle');
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用解决方案

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保留在点击事件之外。

希望这会对你有所帮助。

Answer 3

每次点击都会多次绑定flip:change事件。在点击Y两次后单击时，这会导致x翻转两次。因此看起来似乎什么也没发生。

您可以在debugger;开头添加$('#right').click(function() {并使用控制台调试代码时看到这种情况。

无论如何，添加事件绑定只会修复它，因为这就是你所需要的。

删除代码中的所有$("#card").on('flip:change', function() {实例，只添加一次，解决问题。

在此示例中，我将其添加到代码的底部。

var ax = 'y';
$(document).ready(function() {
  $('#card').flip({
    trigger: 'manual',
    axis: 'y'
  });
  $('#left').click(function() {
    //debugger;
    if (ax != 'y') {
      $("#card").flip({
        axis: 'y'
      });
      ax = 'y';
    } else {
      $("#card").flip('toggle');
    }
  });
  $('#right').click(function() {
    //debugger;
    if (ax != 'x') {
      $("#card").flip({
        axis: 'x'
      });
      ax = 'x';
    } else {
      $("#card").flip('toggle');
    }
  });
  // Only bind ones.
  $("#card").on('flip:change', function() {
    $('#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>

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

3 个答案: