連續的Jquery輪換轉移？

Question

我有兩個按鈕，分別位於表單的相對兩側（前面是“下一步”，后面是“提交”）。 這些按鈕可以正確執行旋轉（180度），但是每次只能單擊一次。 換句話說，onClick命令每次單擊僅起作用一次。 我有什么方法可以重置轉換，以便無限次重復單擊旋轉？

 <script type="text/javascript"> $(document).ready(function() { $("input[name='next']").on("click", function() { // console.log( "The NEXT Button Worked!" ); $(".form").css("transform", "rotateY(180deg)"); }) $("input[name='back']").on("click", function() { // console.log( "The BACK Button Worked!" ); $(".formFlipAgain").css("transform", "rotateY(180deg)"); }) }); function showBack() { setTimeout(function() { document.getElementById("backSide").style.display = "block"; }, 600); setTimeout(function() { document.getElementById("frontSide").style.display = "none"; }, 600); }; function showFront() { setTimeout(function() { document.getElementById("frontSide").style.display = "block"; }, 600); setTimeout(function() { document.getElementById("backSide").style.display = "none"; }, 600); }; 

Answer 1

引入兩個標志。

var flag1=0;
var flag2=0
$(document).ready(function() {
  $("input[name='next']").on("click", function() {
    // console.log( "The NEXT Button Worked!" );
    $(".form").css("transform", "rotateY("+flag1?0:180+"deg)");
    flag1=!flag1;
  })
  $("input[name='back']").on("click", function() {
    // console.log( "The BACK Button Worked!" );
    $(".formFlipAgain").css("transform", "rotateY("+flag2?0:180+"deg)");
    flag2=!flag2;
  })
});