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 に答える