.removeClass 不工作，并阻止 .addClass 工作答案

【问题标题】：.removeClass not working, and preventing .addClass from working.removeClass 不工作，并阻止 .addClass 工作
【发布时间】：2016-11-30 06:31:54
【问题描述】：

我很难找到任何有助于解决此问题的信息。我在这里尝试了其他几个对其他人有用的选项，但它似乎不起作用。

我有一个这样的 div 设置：

    <div class="dynamic-content">
        <div class="button"></div>
        <div class="content"></div>
    </div>

我要做的是在单击 .button 时将 CSS 动画应用于 .dynamic-content ，方法是添加特定类，然后通过再次单击 .button 并删除特定类来删除该动画。

这是我的 jQuery：

    $(".button").on('click', function() {
        if ($(".dynamic-content").hasClass('open')) {
            $(".dynamic-content").removeClass('open'));
        } else {
            $(".dynamic-content").addClass('open'));
        }
    }

如果我不包含 .removeClass() 部分，则 addClass 可以完美运行。但是，只要我在检查器中放入 .removeClass，我就可以看到 .dynamic-content 亮起，好像被 JS 瞄准并采取了行动一样，但是什么也没发生，甚至 .addClass 也没有工作。

【问题讨论】：

怎么调试的？？？因为您发布的代码中有明显的错字所以？！
嘿，感谢您指出这一点！我认为这是我在这里重新输入代码的问题。但是，我确实仔细检查了我的代码，以确保我没有任何额外的大括号。
其他问题可能是因为您有 .button 嵌套元素，因此每次点击都会触发两次事件处理程序。或者您有任何其他单击处理程序绑定到再次切换此类的任何父级。如果添加：$(".button").on('click', function(e) { e.stopPropagation(); /* rest of code*/ });
嘿 A. Wolff，事实证明，我忽略了我两次调用我的 .js 文件的事实。一旦我解决了这个问题，我的问题最终解决了。不过，感谢您的意见！

标签： javascript jquery css

【解决方案1】：

那是因为你的代码有错误：

 $(".dynamic-content").removeClass('open'));
                                        //^Remove extra brace

删除多余的空格，你就可以开始了。

你也可以使用.toggleClass()优化你的代码：

$(".button").on('click', function() {
   $(".dynamic-content").toggleClass('open');
});

【讨论】：

嘿 Milind，我删除了额外的大括号，并切换到 .toogleClass，但我仍然遇到同样的问题。当我单击它时，检查器显示元素闪烁，但它什么也不做。
@BeardedWineGuy：你能在小提琴中重现这个问题吗？
@MiliandAnantwar：我感觉很糟糕，很抱歉浪费了你的时间；我再次拿起我的代码插入小提琴，并意识到我调用了我的 .js 文件两次。我删除了第二次调用它，它修复了一切。
@BeardedWineGuy：没问题。很高兴它有帮助:)

【解决方案2】：

JS：

$(".button").on('click', function() {
        if ($(".dynamic-content").hasClass('open')) {
            $(".dynamic-content").removeClass('open');
        } else {
            $(".dynamic-content").addClass('open');
        }
    });

【讨论】：

感谢您指出我在上述代码中有效的括号问题。我最终意识到我调用了我的 .js 文件两次，这就是导致问题的原因。

【解决方案3】：

条件有效吗？因为“.dynamic-content”是一个类，jQuery 会得到它找到的第一个类。也许页面上还有另一个与您的情况有关的内容？

正如人们所说的那样，可能发生的另一件事是你的额外“）”正在破坏你的功能。

无论哪种方式，我都会尝试 toggleClass，它完全符合您的条件：

$(".button").on('click', function() {
    $(".dynamic-content").toggleClass("open")
}

如果该类存在，则删除它，如果不存在，则添加它。

【讨论】：

感谢您指出我在那里遇到的大括号问题。我认为在stackoverflow中转录我的代码是一个问题，但这是一个问题。然而，事实证明，我最大的问题是我没有意识到我已经调用了我的 .js 文件两次。一旦我解决了这个问题，我的问题最终解决了。但是，我确实切换到了 .toggleClass 方法。