jQuery .toggleClass不切换CSS类 [英] jQuery .toggleClass not toggling CSS class

问题描述

在 #button 上切换时， .highlight 类不起作用.我在做什么错了?

The .highlight class isn't working when toggled on #button. What am I doing wrong?

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");
    });
});

推荐答案

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

Your jQuery code is working. The issue is that your .highlight class does not have a high enough specificity to override the styles placed on the element by the #button selector. Try changing your CSS to this:

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

这篇关于jQuery .toggleClass不切换CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！