javascript - 如何添加一个可以持续工作的点击类？

Question

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

我正在使用带有“flip”类的 animate.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');
}

DEMO