为什么 addClass 在此代码中不起作用

Question

在下面的函数代码中，当我使用 CSS 时，它工作正常。当我将此 CSS 添加到类中时它不起作用

function setTab(selection) {
        $("#"+selection).css('background', '#CC0000');
        $("#"+selection).css('color', '#ffffff');   
        // Both the Above statements works fine     
        $("#"+selection).addClass("selectedclass");//doesnot work 
    }   

    .selectedclass li{
        background: #CC0000;
        color: #ffffff;
    }

Answer 1

我敢打赌，这个班级正在被另一种风格所统治。在本例中这是最明显的。前两行代码起作用的原因是因为它们直接编辑样式，在添加类的情况下，级联规则仍然适用

尝试这些：

<style type="text/css">
    /* I'm guess at what I think you need, since I don't know your HTML structure. */
    body .selectedclass li,
    body ul .selectedclass li ,
    body ol .selectedclass li {
        background: #CC0000;
        color: #ffffff;
    }
</style>

您的代码很简单，所以它可能是正确的。但你可以像这样清理它：

function setTab(selection)
{
    if ( typeof(selection) == "string" )
    {
        $( '#' + selection ).addClass( "selectedclass" );
    }
}   

Answer 2

是否有可能存在比所应用的类选择器更具体的选择器？您是否查看过 Firebug 中的元素以了解该元素从何处获取其属性？使用前两个语句，您可以直接在元素上设置样式，这将优先。使用第二个，它将取决于您定义的各种样式、它们的顺序和特殊性。也可能是您的类应用于错误的元素，即直接应用于 li 而不是父级 ul (ol)。在这种情况下，您需要将规则更改为 li.selectedClass。

另外，您知道可以将 jQuery 函数链接在一起吗？ css 有一个重载，它采用键/值对的映射。

function setTab(selection) {
    $("#"+selection).css({'background-color': '#CC0000', 'color' : '#ffffff'});
}