Как добавить класс по клику, который работает?

Question

У меня есть монета на моей странице, которую пользователь нажимает, и она должна продолжать листать из-за этого добавленного класса при каждом нажатии.

Я использую 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

Answer 2

Это должно быть $("#coin").addClass("flip"); внутри else состояние.

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

Answer 3

Использование toggleClass() для переключения между классом и setInterval() для выполнения в каждом 1 секунду

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

Fiddle Demo