Jquery'addClass'有时会失败，但css却没有

Question

在某些情况下，这不起作用：

("#id").addClass("class");

而这将：

("#id").css('color','Blue');

为什么会失败以及如何添加课程呢？

Answer 1

关键概念： CSS特异性

  

从CSS特异性：你应该知道的事情：

     

  
1. 特异性决定了浏览器应用的CSS规则。
  
2. 特殊性通常是您的CSS规则不适用于某些元素的原因，尽管您认为它们应该。
  
3. 每个选择器都在特异性层次结构中占有一席之地。
  
4. 如果两个选择器适用于同一个元素，则具有更高特异性的元素将获胜。
  
5. 有四个不同的类别定义给定选择器的特定级别：内联样式，ID，类+属性和元素。
     ...
  

不错的小cheatsheet：

_{（来源：allapis.com）}

Answer 2

如果应用 内联样式 ，则addClass可能会失败。

样品

$(function() {
    $("#ul1 li a" ).hover(
       function () {
           $(this).css('color','red');
       }, 
       function () {
           $(this).css('color','blue');
       }
    );
});

<ul id="ul1">
    <li>
        <a href="#">test
        </a>
    </li>
</ul>

您也可以使用toggleClass方法执行此操作。

Answer 3

一种可能性是该类具有适用于它的预先存在的样式，它取代了您添加的类的属性。虽然，我只是建议这个，因为你使用.css作为一种始终有效的策略。如果对象根本没有将类添加到它中，我不确定。

Answer 4

这可能是因为当一个类已经应用时，它将不再被应用。 Jquery检查一下。 css方法适用于不查看以前的样式。

Answer 5

做一件事，尝试像

这样的事情

 ("#id").addClass("test");

现在查看Firebug / IE开发工具栏是否正在应用这个虚拟“测试”类。