点击Jquery开关打开和关闭类

Question

我正在尝试计算，点击函数删除类on并添加新的类off。当我再次点击div时，我想再次添加类on并删除类off，但这并没有发生。我不知道这不起作用的原因是什么。但如果警报有效。这是我的密码。和Jsfidle演示

$(".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中当前不存在某个元素，但希望绑定到该元素的未来实例，则使用事件委派。

你的一些文件：

• .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');
})