Javascript jQuery addClass（）方法添加类，但不更改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类，但实际上它并没有像应该的那样改变颜色。如果我使用

css（）

方法来更改颜色，那么它可以正常工作，但我希望避免这种情况。

这很可能是添加的css样式的优先级问题

在这两个类中，第一个添加了一个新类。一个类在添加到元素的所有类中都具有优先级，因此如果在此之后添加了另一个类，则该背景色将覆盖错误类

第二个选项向元素添加一个内联样式，该样式优先于添加的所有类，因此将更改颜色

$(this).addClass("error"); // This adds a class element which can be overwritten
//$(this).css("background-color", "#ff8080"); // This adds an inline style.

尝试：

---

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

这很可能是添加CSS样式的优先级问题

在这两个类中，第一个添加了一个新类。一个类在添加到元素的所有类中都具有优先级，因此如果在此之后添加了另一个类，则该背景色将覆盖错误类

第二个选项向元素添加一个内联样式，该样式优先于添加的所有类，因此将更改颜色

$(this).addClass("error"); // This adds a class element which can be overwritten
//$(this).css("background-color", "#ff8080"); // This adds an inline style.

尝试：

---

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

是否有其他CSS规则在元素上定义

背景颜色

？您可能有其他CSS，它们已经将bg颜色设置得更“具体”。由于样式属性（使用

$（this）.css（）

）具有更高的优先级，因此它可以覆盖其他基于css类的设置。使用背景色：#ff8080！重要的.error类中使用code>，或者使用更具体的CSS选择器，因此它具有更高的渲染优先级。顺便说一下，您的浏览器将允许您检查应用/覆盖了哪些CSS类和样式。仅供参考，您的整个

if/else

可以替换为一行：

$（此）。toggleClass（'error'，condition）

。是否有其他CSS规则定义元素上的

背景色

？您可能有其他CSS，这已经将bg颜色设置得更“具体”。由于样式属性（使用

$（this）.css（）

）具有更高的优先级，因此它可以覆盖其他基于css类的设置。使用背景色：#ff8080！重要的.error类中使用code>，或者使用更具体的CSS选择器，因此它具有更高的渲染优先级。顺便说一下，您的浏览器将允许您检查应用/覆盖了哪些CSS类和样式。仅供参考，您的整个

if/else

可以替换为一行：

$（this）。toggleClass（'error'，condition）

。

.error {
    background-color: #ff8080 !important;
}