0

我正在尝试打开/关闭javascript，但我有一个问题：尽管我的班级发生了变化，但我总是点击我的第一堂课。

我总是得到相同的结果：on->on 或 off->off。我在 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');
});

如果有人有建议，我将非常感激！

4

4 回答 4

4

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

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

    alert(state);

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

小提琴

这可能会令人困惑，但即使您删除了.off该类，事件处理程序仍会绑定到同一个元素，因为它在.off绑定时具有该类！

于 2013-02-24T14:44:33.403 回答
2

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

代表团

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

http://jsfiddle.net/ExplosionPIlls/2PHJg/

内部状态

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

http://jsfiddle.net/ExplosionPIlls/2PHJg/1/

于 2013-02-24T14:47:29.493 回答
1

这个问题是因为 $('.on') 和 $('.off') 只被评估一次，当你的 javascript 代码运行时。

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

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

在 #container 的位置使用选择器来选择您的 .on / .off 元素的父级。在 on() 调用的第二个参数中，您必须指定要侦听事件的元素。

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

于 2013-02-24T14:46:23.177 回答
1

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

例子：

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

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

您可以在http://codepen.io/skimberk1/pen/GJhna看到一个工作示例。

于 2013-02-24T14:49:27.553 回答