jQuery .toggleClass 不切换 CSS 类答案

【问题标题】：jQuery .toggleClass not toggling CSS classjQuery .toggleClass 不切换 CSS 类
【发布时间】：2018-03-17 04:41:13
【问题描述】：

.highlight 类在打开 #button 时不起作用。我做错了什么？

HTML：

<form>
    <input id="button" type="submit" value="Click Me">
</form>

CSS：

#button {
    background-color: #AABF1A;
}

.highlight {
    background-color: #555BBB;
}

jQuery:

$(document).ready(function () {
    $("#button").click(function() {
        $(this).toggleClass("highlight");
    });
});

【问题讨论】：

这是一个提交按钮。您是否正在采取措施阻止表单提交和页面重新加载？
如果在按钮单击时提交表单，您将看不到切换效果。单击按钮会导致离开/刷新页面。高亮功能将不会显示。如果您不想在单击按钮时提交表单，请将按钮类型从“提交”更改为“按钮”。
您的 HTML 是否有另一个具有相同 ID #button 的元素？你有没有和一些检查员核实过这门课不在那里？还是您这么说只是因为您看到了您所期望的样式？
罗里的回答是正确的。此外，.highlight 中唯一变化的属性是 background-color，因此请考虑删除其他属性。
啊谢谢@j08691，好电话！那是我的问题。 type="button" 是我需要使用的。

【解决方案1】：

您的 jQuery 代码正在运行。问题是您的.highlight 类没有足够高的特异性来覆盖#button 选择器放置在元素上的样式。尝试将您的 CSS 更改为：

#button.highlight {
    background-color: #555BBB;
}

【讨论】：

对于反对者，好的，是的，需要阻止按钮提交表单，但这就是为什么更改类似乎“不起作用”的原因。
假设 OP 有一个处理程序阻止提交表单（他可以这样做，他没有向我们展示他的所有代码），那么这就是答案。
特异性很好。如果未提交/刷新表单，则突出显示会正常工作。
@NawedKhan id > 任何东西。
其实如果特异性没问题，问题就不会是"jQuery .toggleClass not toggling CSS class"，而是"为什么是背景色我的按钮在闪烁吗？”

【解决方案2】：

完整代码：

$(document).ready(function () {
$("#button").click(function(event) {
    event.preventDefault
    $(this).toggleClass("highlight");
});
});

【讨论】：