Question

我正在努力开启/关闭javascript，但我遇到了一个问题：尽管班级发生了变化，我仍然会在第一堂课时点击。

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

如果有人有任何建议，我将非常感激!!

Answer 1

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

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

    alert(state);

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

FIDDLE

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

Answer 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/

Answer 3

导致此问题是因为当您的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');
});

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

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

Answer 4

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

示例：

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

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

您可以在http://codepen.io/skimberk1/pen/GJhna看到一个有效的例子。

打开/关闭javascript

4 个答案:

团

内部状态