jQuery 추가/제거 클래스는 한 번만 작동합니다.

Question

일부 기본 jQuery에 작은/(이상한?) 문제가 있습니다. 이제

<label for="service-webdesign"> 
    <input type="checkbox" name="service-web" id="service-webdesign" value="Webdesign" /> 
    <span id="service-webdesign-span">Webdesign</span> 
</label> 
<label for="service-SEO" title="Search Engine Optimization"> 
    <input type="checkbox" name="service-web" id="service-SEO" value="SEO" /> 
    <span class="service-SEO-span">SEO</span> 
</label> 

, 내가 추가/그들이 공격 할 때 이러한 요소를 다른 중 하나의 스타일을 "활성"라는 클래스를 제거한다 수행 할 작업 : HTML 형식의 내부에서 나는 두 가지 요소가있다. 다음은이를 달성하기위한 jQuery입니다 :

$('#service-webdesign').click(function(){ 
    if($('#service-webdesign-span').hasClass('active')){ 
     $('#service-webdesign-span').removeClass('active') 
     } else ($('#service-webdesign-span').addClass('active')) 
    }); 

$('#service-SEO').click(function(){ 
    if($('#service-SEO-span').hasClass('active')){ 
     $('#service-SEO-span').removeClass('active') 
     } else ($('#service-SEO-span').addClass('active')) 
    }); 

두 가지 모두 동일하지만 (작동하는 것이 좋습니다.) 첫 번째 것은 예상대로 작동합니다. jQuery를 바꾸면 아무런 차이가 없으므로 주문과 관련이 없다고 확신합니다. 어제 jQuery 만 시작 했으므로이 동작을 볼 수있는 기능이 부족합니다.

도움이 될 것입니다.

Answer 1

당신은 toggleClass

를 사용해야합니다 그리고 당신은 이미 댓글에서 언급 Juhana으로 올바른 선택을 사용해야합니다!

$('#service-webdesign-span').toggleClass('active'); 

Answer 2

service-SEO-span은 class이지만 service-webdesign-span은 id이며 둘 다 id 인 것처럼 타겟팅하고 있습니다.