jquery - 在复选框图像之间切换 - 但更容易

Question

我有两个选中和未选中复选框的小图像。

我的代码正在运行，但我认为使用 .toggle() 可能会更短？直到现在我才弄清楚，这是代码：

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

这里有任何 jQuery 大师吗？;)

Answer 1

如果您确定，该元素只有一个类，您可以通过用逗号分隔它们来为每个绑定绑定两个类的处理程序。并使用 toggleClass

$('.uncheck,.checked').click(function() {
    $(this).toggleClass('uncheck checked');
});

Answer 2

看看这个小提琴 - 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 具有哪些类。