Kontinuierliche Jquery Rotationstransfer?

Question

Ich habe zwei Tasten, die sich auf gegenüberliegenden Seiten eines Formulars befinden ("Next" auf der Vorderseite, "Submit" auf der Rückseite). Die Knöpfe führen die Drehung (180 Grad) korrekt aus, sie funktionieren jedoch nur für jeweils einen Klick. Mit anderen Worten, der onClick-Befehl funktioniert nur einmal pro Klick. Gibt es eine Möglichkeit für mich, meine Transformation zurückzusetzen, um meine Rotation auf Klick unendlich zu wiederholen?

<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

zwei Flaggen einführen.

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