jquery打开和关闭类的点击

Question

我想解决，点击功能删除类on并添加新的类off。当我再次点击div时，我想再次添加类on并删除没有发生的类off。我不确定这是不是工作的原因。但如果警觉它的工作。 这是我的代码。和Jsfiddle demo

$(".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")和匹配选择的DOM目前$(".off")选择元素。因此，如果您将元素的类从.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中，但您想要绑定到元素的未来实例，则使用事件委托。

有些文档为雅：

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

Answer 2

如果您使用某种活动绑定，则代码更容易编码。考虑

$('.on').live('click', function() { 
    $(this).removeClass('on').addClass('off'); 
}); 
$('.off').live('click', function() { 
    $(this).removeClass('off').addClass('on'); 
}); 

Answer 3

你可以请检查一下。

$(".on").live('click',function() { 
    $(this).removeClass('on').addClass('off'); 
}) 
$(".off").live('click',function() { 
    $(this).removeclass('off').addClass('on'); 
})