打开/关闭javascript

我正在尝试打开/关闭javascript，但我有一个问题：尽管我的类发生了变化，但我的单击总是出现在我的第一个类中

我总是得到相同的结果：开->开或关->关。我签入Firebug我的html已正确更改

下面是我的简化代码：

$('.off').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    alert('off');

    $(this).removeClass('off');
    $(this).addClass('on');
});

$('.on').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    alert('on');

    $(this).removeClass('on');
    $(this).addClass('off');
});

---

如果有人有什么建议，我将不胜感激

事件处理程序是在pageload上绑定的，因此更改类不会更改事件处理程序，因为它们附加到绑定时存在的任何元素。要将它们附加到将来的元素，即更改类时，需要委派事件处理程序，但我认为更简单的解决方案是切换类或使用标志：

$('.off').on('click', function(e) {
    e.preventDefault();
    var state = $(this).is('.off') ? 'on' : 'off';

    alert(state);

    $(this).toggleClass('off on');
});

---

这可能会让人困惑，但即使您删除了.off类，事件处理程序仍然绑定到同一个元素，就像绑定时它有.off类一样

导致此问题的原因是，当javascript代码运行时，$'.on'和$'.off'只计算一次

您必须使用事件委派来解决问题。按以下方式修改代码。我在下面描述它的含义

$('#container').on('click', '.off', function(e) {
    e.stopPropagation();
    e.preventDefault();

    alert('off');

    $(this).removeClass('off');
    $(this).addClass('on');
});

$('#container').on('click', '.on', function(e) {
    e.stopPropagation();
    e.preventDefault();

    alert('on');

    $(this).removeClass('on');
    $(this).addClass('off');
});

在容器的位置，使用选择器选择.on/.off元素的父元素。在on call的第二个参数中，您必须指定要侦听其事件的元素

这样，即使元素的类发生更改，事件处理程序也会正常运行。

当您第一次使用.on绑定时，.off或.on都不存在。您需要使用事件委派，或者您可以重写它，以便它绑定到另一个类并保持开/关状态。我将向您展示这两种方法

代表团 内部状态

---

问题在于，当代码第一次运行时，事件处理程序是绑定的，因此当类发生更改时，事件处理程序不会反弹。解决此问题的一种方法是为元素分配一个不变的类，并将其用于事件处理程序

例如：

$('.button').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    $(this).toggleClass('off on');
});

---

您可以在上看到一个工作示例。

我的第一堂课中“单击总是出现”是什么意思？请再解释一下，谢谢你的回答

$(".switch").on('click', function () {
    if ($(this).is('.off')) {
        $(this).removeClass('off').addClass('on');
    }
    else {
        $(this).removeClass('on').addClass('off');
    }
});

$('.button').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    $(this).toggleClass('off on');
});