jQuery .toggleClass不切换CSS类

Question

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

Answer 1

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

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

Answer 2

完整代码：

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

工作小提琴：http://jsfiddle.net/robertrozas/9g8Jj/2/