jQuery div에 클래스 추가 onclick 추가

Question

아래 코드를 작성하여 첫 번째 클릭에서 rotate를 통해 화살표를 성공적으로 회전시킵니다.

두 번째 클릭시 화살표가 다시 돌아가고 싶습니다. 나는 다른 것을 사용하고, 클릭 할 때 클래스를 제거하려고 시도했다. 그러나 이것은 효과가 없습니다. 어떤 제안이나 도움이든지 좋을 것입니다!

$(document).ready(function(){ 
     $('#first').click(function(event) { 
      $(".content.firstArrow").addClass("rotate"); 
     }); 
     $('#second').click(function(event) { 
      $(".content.secondArrow").addClass("rotate"); 
     }); 
     $('#third').click(function(event) { 
      $(".content.thirdArrow").addClass("rotate"); 
     }); 
     $('#forth').click(function(event) { 
      $(".content.forthArrow").addClass("rotate"); 
     });  
    }); 

Answer 1

대신 당신은 코드를 최적화하고 단 하나의 핸들러를 남길 수 있습니다

Answer 2

$('#first :not(.rotate)').click(function(event) { 
    $(".content.firstArrow").addClass("rotate"); 
}); 

$('#first .rotate').click(function(event) { 
    $(".content.firstArrow").removeClass("rotate"); 
}); 

Answer 3

사용 .toggleClass를 사용해보십시오 :

를

$(document).ready(function(){ 
    $('#first, #second, #third, #forth').click(function(event) { 
     $(".content." + $(this).attr('id') + "Arrow").toggleClass("rotate"); 
    }); 
}); 

Answer 4

addClass() 또는 removeClass()의() .toggleClass()

$(".content.firstArrow").toggleClass("rotate");