jQuery를 : optimze 코드 (라벨의 배경)

Question

나는이 jQuery 코드를 가지고 그것을 최적화 할 수있는 경우 (단축) 잘 모르겠어요 :

<div class="show-results-from"> 
    <ul> 
    <li>See results from:</li> 
    <li> 
     <label class="label-a"> 
     <input name="a" type="checkbox" id="a" value="tabs1" checked disabled> 
     Products &amp; Services <span>(16)</span></label> 
    </li> 
    <li> 
     <label class="label-b"> 
     <input name="b" type="checkbox" id="b" value="tabs2" checked> 
     Publications <span>(9)</span></label> 
    </li> 
    <li> 
     <label class="label-c"> 
     <input name="c" type="checkbox" id="c" value="tabs3" checked> 
     Other <span>(150)</span></label> 
    </li> 
    </ul> 
</div> 

:

//Checkboxes highlight 
$('.show-results-from label').addClass('active'); 
$('input:checkbox').click(function(){  
    if ($('input:checkbox#a').is(':checked')) { 
     $('.label-a').addClass('active'); 
     $ 
    } else { 
     $('.label-a').removeClass('active'); 
    } 
    if ($('input:checkbox#b').is(':checked')) { 
     $('.label-b').addClass('active'); 
     $ 
    } else { 
     $('.label-b').removeClass('active'); 
    } 
    if ($('input:checkbox#c').is(':checked')) { 
     $('.label-c').addClass('active'); 
     $ 
    } else { 
     $('.label-c').removeClass('active'); 
    } 
}); 

여기에 해당 HTML의

여기서 일어나는 일은 페이지로드시 모든 레이블에 클래스가 추가되어 CSS를 통해 클래스가 시각적으로 해당 확인란이 선택되었음을 사용자에게 알리는 스타일입니다.

레이블이나 체크 상자를 클릭하면 클래스가 제거되고 사용자는 시각적으로 해당 확인란의 선택이 해제되었음을 알게됩니다.

그게 전부입니다.

jQuery 코드를 최적화 할 수있는 방법이 있습니까? 아니면 그대로 두어도 될까요? ... 너무 반복적 인 것처럼 보이지만 저는 JavaScript 전문가가 아닙니다.

미리 감사드립니다.

Answer 1

그래 같이, 상대적으로 <label>을 찾기 위해 아래로, 당신은 당신의 click 핸들러를 줄일 수 있습니다 (또는 change은, 난 여기가 좋아) :

이

$('input:checkbox').change(function(){ 
    $(this).parent().toggleClass('active', this.checked); 
}); 

이것은 <label>를 얻을 수 .parent()를 사용하여, 다음 .toggleClass()를 전환 확인 여부에 따라 .active 클래스를 켜거나 끕니다.