Question

我的页面上有一个用户点击的硬币，每次点击时都会因为这个添加的类而不断翻转。

我正在使用animate.css和“flip”类

所以我得到了：

 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

Answer 2

使用toggleClass()在课堂之间切换，setInterval()每1秒执行一次

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

Fiddle Demo

Answer 3

这应该是$("#coin").addClass("flip"); else条件内的function coinToss() { if($("#coin").hasClass("flip")){ $(this).removeClass("flip") } else { $("#coin").addClass("flip"); }。

{{1}}

如何在点击上添加一个继续工作的类？

3 个答案: