javascript - 连续的Jquery轮换转移？

我有两个按钮，分别位于表单的相对两侧（前面是“下一步”，后面是“提交”）。这些按钮可以正确执行旋转（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);
  };

最佳答案

引入两个标志。

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

关于javascript - 连续的Jquery轮换转移？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38596551/