我正在使用jQuery addClass()
函数将文本输入字段的背景颜色设置为红色以表示错误。这是我的代码
的javascript
$("#id").delegate("input:text", "keyup change", function(e) {
val = $(this).val();
if (condition) {
$(this).addClass("error"); // This doesn't work
//$(this).css("background-color", "#ff8080"); // This Works
} else {
$(this).removeClass("error"); // This doesn't work
//$(this).css("background-color", ""); // This Works
}
});
CSS
.error {
background-color: #ff8080;
}
我检查了元素,它确实添加和删除了错误类,但它实际上并没有改变它应该的颜色。如果我使用css()
方法更改颜色,那么它可以正常工作,但我想避免这种情况。
答案 0 :(得分:2)
这很可能是添加了CSS样式优先级的情况。
在其中两个中,第一个添加了一个新类。一个类将在添加到元素的所有类中具有优先级,因此如果在此之后添加另一个类,则该背景颜色将覆盖错误类。
第二个选项为元素添加内联样式,该样式优先于所有添加的类,因此将更改颜色。
$(this).addClass("error"); // This adds a class element which can be overwritten
//$(this).css("background-color", "#ff8080"); // This adds an inline style.
尝试:
.error {
background-color: #ff8080 !important;
}
或者找出哪个类覆盖了错误类,然后更改了背景颜色。