Question

我可能只是因为睡眠不足而责怪这一点，但是我有一段时间从一些链接中删除一个班级。

以下是发生的事情：当我选中一个复选框时，我在一堆链接中添加了一个类，然后我希望通过取消选中该复选框来删除该类。

还涉及：更改复选框上的类，当取消选中时，工作。它只是不删除类。

$(document).ready(function() {
    var revealer = $('.revealer .reveal');
    var hider = $('.revealer .hide');
    var days = $('.days li a');
    var revealed = $('.days li a.revealed');

    $(revealer).change(function() {
        $(this).toggleClass('reveal hide');
        $(days).each(function(i) {
            var day = $(this);
            setTimeout(function() {

                // $(day).toggleClass('revealed'); Toggle would work, but I don't want the delay when removing the class
                $(day).addClass('revealed');
            }, 300 * i);
        });
    });

    $(hider).change(function() {
        $(this).toggleClass('reveal hide');
        $(revealed).removeClass('revealed');
    });

});

在jsFiddle中，每个链接的背景逐渐变为黑色，一次一个。那很有用。取消选中会立即将它们全部恢复正常，但事实并非如此。

Answer 1

问题是运行时没有.revealer .hide：

var hider = $('.revealer .hide');

所以hider是一个空列表。您的其他选择器也有类似的问题：选择器匹配DOM中的元素，就像使用选择器时的DOM一样。因此，当您说$('.revealer .hide').change(...)您将更改处理程序绑定到当前匹配.revealer .hide的任何元素时，如果匹配的元素将来发生更改，那么您的更改处理程序将不会绑定到它们（但请参见下文）对于这类问题的标准解决方案）;类似地，如果从复选框中删除hide类，然后稍后将其放回（即toggleClass），则原始更改处理程序仍将绑定到您的复选框：对元素类的更改不会影响哪些处理程序是否受其约束。

如果我们删除了您的缓存选择器并切换您的更改处理程序以使用live，那么事情就会起作用：

$('.revealer .reveal').live('change', function() {
    $(this).toggleClass('reveal hide');
    $('.days li a').each(function(i) {
        var day = $(this);
        setTimeout(function() {
           day.addClass('revealed');
        }, 300 * i);
    });
});

$('.revealer .hide').live('change', function() {
    $(this).toggleClass('reveal hide');
    $('.days li a.revealed').removeClass('revealed');
});

实时版：http://jsfiddle.net/ambiguous/FaZkR/

live和delegate函数充当代理，它们基于DOM的当前状态捕获和重定向事件，而不是当您使用DOM的状态时最初叫。

Answer 2

问题是你试图缓存状态而不是元素。

在脚本开始时，您缓存$('.revealer .reveal')和$('.revealer .hide')，这些状态表示一个元素在其间切换。它只是不起作用。

您将匹配的元素缓存为revealer，并将第一个change函数绑定到它。你认为你正在缓存的hider是一个空集，因为你的脚本加载时没有匹配的元素。所以你的第二次绑定什么都不做。

你应该做的是改变你的change函数，根据.revealer的当前类别做出不同的反应，或者用live代替典型的绑定，这基本上是什么你正在尝试（基本上它会监视选择器模式，而不是绑定到元素）。

Answer 3

没有.hide作为类的元素，因此永远不会填充hider。作为一个快速和愚蠢的解决方案，改变

$(day).addClass('revealed');

到

$(day).toggleClass('revealed');

并删除您的$(hider).change功能

然后小提琴中的复选框在某种程度上起作用，我相信你可以从那里弄明白。

编辑：如果它回答了您的问题，请务必选中Stackoverflow答案左侧的复选框。回过头来看看你的旧问题吧。您只有20％的接受率，这使得您的问题不太可能得到解答。

Answer 4

正如其他人所指出的那样，您的代码存在以下问题：

您正在缓存jquery对象并将函数绑定到它们。所以这是一个问题，因为在函数绑定时，dom中没有满足选择器的元素，例如$（'。revealer .hide'）。如果你想使用这些选择器，那么你必须在jquery中使用live函数。 http://api.jquery.com/live/

2.Else你可以在复选框上使用id选择器并相应地绑定你的函数。

jQuery removeClass（）不起作用

4 个答案: