0

チェックされたチェックボックスとチェックされていないチェックボックスの2つの小さな画像があります。

私のコードは機能していますが、.toggle() を使用するともっと短くなる可能性がありますか? 私は今までそれを理解できませんでした、ここにコードがあります：

$('.uncheck').click(function() {
    $(this).removeClass('uncheck').addClass('checked');
});
$('.checked').click(function() {
    $(this).removeClass('checked').addClass('uncheck');
});

ここに jQuery の達人はいますか? ;)

4

2 に答える 2

2

その要素にクラスが 1 つしかないことが確かな場合は、コンマで区切ることにより、1 つのバインディングごとに両方のクラスのハンドラーをバインドできます。そして、toggleClass を使用します

$('.uncheck,.checked').click(function() {
    $(this).toggleClass('uncheck checked');
});
于 2012-11-09T14:21:02.703 に答える
0

このフィドルを見てください-http://jsfiddle.net/3XhbW/1/

HTML-

<div class="checked unchecked">Test Text</div>

CSS-（チェックされていないオーバーライドがチェックされていることに注意してください）

    .checked {
    color: #FFFFFF;
    background: #0000FF;
}
.unchecked {
    color: #000000;
    background: #00FF00;
}

jQuery-チェックされていないクラスを最初に「オフ」に切り替えます

$('div').click(function() {
    $(this).toggleClass('unchecked');
    var myCurrentClasses = $(this).attr('class');
    $(this).html(myCurrentClasses);
});

現在のdivのクラスを確認できるように、最初のクリック後にクラス情報をdivに投稿しています。

于 2012-11-09T13:45:14.013 に答える