如何在单击时添加继续工作的类

Question

我的页面上有一枚硬币，用户点击它，由于每次点击时添加的类，它应该不断翻转。

我正在使用动画.css类"翻转"

所以我得到了：

 function coinToss() {
        var number = Math.floor(Math.random() * 2);

        $("#coin").toggleClass('flip');


        if(number == 0) {
            var value = $("#headsText").val(); 
            document.getElementById("result").innerHTML="Heads";
            $('#resultText').html($("#headsText").val());
        }
        else if(number == 1) {
            var value = $("#tailsText").val(); 
            document.getElementById("result").innerHTML="Tails";
            $('#resultText').html($("#tailsText").val());
    }
}

有了这个，硬币只在第一次掷出。我需要它来不断翻转每一次点击。

Answer 1

只需使用 toggleClass（），该方法意味着如果匹配的元素没有类名，则添加它;如果匹配的元素已经有类名，则将其删除。

function coinToss() {
    $("#coin").toggleClass('flip');
}

演示

Answer 2

使用 toggleClass（） 在类之间切换，使用 setInterval（） 在每 1 秒内执行一次

var inter;
function coinToss() {
    $("#coin").toggleClass('flip');
}
$('.button').click(function(){inter=setInterval(coinToss,1000)});
$('.stop').click(function(){clearInterval(inter)});

小提琴演示

Answer 3

这

应该else条件下$("#coin").addClass("flip");。

function coinToss() {      
 if($("#coin").hasClass("flip")){
      $(this).removeClass("flip")
 }
else {
   $("#coin").addClass("flip");
}