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有哪个类。

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

2 个答案: