jQuery addClass添加了类，但我没有看到浏览器中的视觉更改

Question

我正在使用Angular 1.6和jQuery 3.3.1来练习Angular。我的简单应用程序屏幕看起来像这样。

在下面的事件处理程序代码段中，我进行了一个简单的验证，以检查系统中是否已存在添加的客户。如果是的话，我想做两件事：

1. 在输入字段顶部显示红色的错误消息。如下图所示，这很好地发生了。

2. 通过将<li>的背景更改为红色，突出显示输入字段下方列表中的现有客户记录。

   $ scope.onBtnAddNewCustomerClicHandler = function（）{     var customerId = $ scope.customers.exists（         $ scope.newCustomer.name，         $ scope.newCustomer.city）;

   var listItem;
   if (customerId > 0) {
       // do the UI thing
       var listItem = angular.element(
         document.querySelector("#liCustomer_" + customerId));
   
       if (listItem === undefined) {
           throw new Error("Error: could not find the duplicate customer Id in the list of existing customers.");
       }
   
       $("#divErrorMessageSection").show();
       listItem.addClass("backgroundRed");
       return false;
   }
   else {
       $("#divErrorMessageSection").hide();
       if (listItem !== undefined) {
           listItem.removeClass("backgroundRed");
       }
   }
   
   $scope.customers.add();
   return true;
   

   };

我的代码工作得很好，做了它应该做的事情，除了我没有看到任何视觉上的变化表明<li>背景变成了红色。但是，我可以将<li>的班级更改为backgroundRed，如下图所示。



无论我是否使用，都会添加该类：

var listItem = angular.element(
          document.querySelector("#liCustomer_" + customerId));

或

var listItem = $("#liCustomer_" + customerId);

查找包含现有客户记录的listItem。

我的CSS看起来像这样：

.backgroundRed {
    background-color: red;
};

Answer 1

尝试在css中添加！important，如下所示：

.backgroundRed {
    background-color: red !important;
};

Answer 2

我经历过很多，根据我的经验，只有在页面加载时才会应用css样式标记。如果要突出显示li标记，则必须更改样式属性。

在错误消息中没有看到这个的原因是因为元素在显示之前是隐藏的，并且始终是红色的。

尝试

listItem.style += "background-color: red";