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")和$(".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

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

点击时Jquery打开和关闭类

3 个答案: