jQuery addClass()方法添加了类,但不改变css样式

时间:2016-08-19 15:00:07

标签: javascript jquery html css

我正在使用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()方法更改颜色,那么它可以正常工作,但我想避免这种情况。

1 个答案:

答案 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;
}

或者找出哪个类覆盖了错误类,然后更改了背景颜色。