javascript - 连续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;
  })
});