JQuery: оптимизировать код (фон в метках) - PullRequest
Новая
       20

JQuery: оптимизировать код (фон в метках)

1 голос
/ 06 января 2011

У меня есть этот код jQuery, и я не уверен, что его можно оптимизировать (сократить): 

//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-код: 

<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>

что при загрузке страницы все метки имеют добавленный к ним класс, с помощью CSS этот класс используется для визуального информирования пользователя о том, что этот флажок установлен.

Когда они нажимают на метку или флажок, классснят и визуально пользователь знает, что этот флажок снят.

Вот и все.

Есть идеи, можно ли оптимизировать код jQuery?Или я могу оставить все как есть? ... Мне это кажется слишком повторяющимся, но я не гуру JavaScript.

Заранее благодарен за любую помощь по этому вопросу.

1 Ответ

4 голосов
/ 06 января 2011

Да, вы можете сократить свой обработчик click (или change, я бы предпочел это здесь), чтобы найти <label> относительно, вот так: 

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

Это использует .parent() для получения <label>, затем .toggleClass() для включения / выключения класса .active в зависимости от того, отмечен ли он.

...