1

我有这个 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 大师。

提前感谢您对此的任何帮助。

4

1 回答 1

4

是的，您可以缩短您的click处理程序（或者change，我更喜欢这里）以找到<label>相对的，如下所示：

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

这用于.parent()获取<label>，然后根据是否选中来打开/关闭类.toggleClass()。.active

于 2011-01-06T19:58:56.460 回答