点击时Jquery打开和关闭类

Question

我正在努力解决,点击功能删除类on并添加新类off.当我再次点击div时,我想再次添加类on并删除off没有发生的类.我不知道这是什么原因不起作用.但如果警惕它的作用.这是我的代码.和Jsfiddle演示

$(".on").bind('click',function() {
    $(this).removeClass('on').addClass('off');
    alert('Hello World');
})
$(".off").bind('click',function() {
    $(this).removeclass('off').addClass('on');
  alert('Hello World');
})
?

Answer 1

$(".on")并$(".off")选择DOM中当前与选择器匹配的元素.因此,如果您将元素的类更改为.on,.off那么它仍将触发.on事件处理程序,因为这是绑定到元素的内容.你可以使用事件委托,但我认为.toggleClass()这可能是一个更好的实现:

$(".on, .off").bind('click',function() {
    $(this).toggleClass('on off');
    alert('Hello World');
})

这是一个演示:http://jsfiddle.net/LEvM4/1/

如果您需要知道该元素当前在哪个类,您可以检查.hasClass():

$(".on, .off").bind('click',function() {
    $(this).toggleClass('on off');
    if ($(this).hasClass('on')) {
        alert('Hello World');
    } else {
        alert('Goodbye World');
    }
})

这是一个演示:http://jsfiddle.net/LEvM4/2/

关于事件授权的一个词.您还可以绑定到要绑定到的元素的祖先元素,并将事件处理程序委托给后代元素:

$(document).delegate(".on", 'click', function() {
    $(this).addClass('off').removeClass('on');
    alert('Goodbye World');
}).delegate(".off", 'click', function() {
    $(this).addClass('on').removeClass('off');
    alert('Hello World');
})

这是一个演示:http://jsfiddle.net/LEvM4/3/

事件委托的缺点是当事件触发时需要更多开销.如果可能的话,通常最好尝试直接绑定到元素.通常,如果元素当前不存在于DOM中但您希望绑定到元素的未来实例,则使用事件委派.

ya的一些文档:

• .on():http://api.jquery.com/on
• .toggleClass():http://api.jquery.com/toggleClass
• .hasClass():http://api.jquery.com/hasClass
• .delegate():http://api.jquery.com/delegate