Question

我有一个表，其行具有不同的类，具体取决于它应该是什么颜色。单击按钮，我希望行的背景颜色立即更改。我尝试了.addClass()和.css()，但都失败了。点击后，我有一个功能，检查行是否有颜色，工作正常。

以下是我正在使用的代码片段以及与行一起使用的css类。

如果某行为白色：

$("#"+table+"_row_"+id).addClass("table-1").removeClass("table-0");

或

$("#"+table+"_row_"+id).css("background-color","orange");

如果某行为橙色：

$("#"+table+"_row_"+id).addClass("table-0").removeClass("table-1");

或

$("#"+table+"_row_"+id).css("background-color","white");

的CSS：

table.tablesorter .table-1{
background-color:orange;
}
table.tablesorter .table-0{
background-color:white;
}

Answer 1

我唯一能想到的是"#"+table+"_row_"+id不会给你你想要的元素。检查该选择器是否为您提供了任何元素，并验证它们是否正确。

我更喜欢仅为此使用类，因为除了你的html之外，你还在代码中嵌入样式。您可以使用hasClass来执行此操作。

通过存储参考来加快速度：

var x = $('#'+table+'_row_'+id);
if (x.hasClass('table-0'))
{
  x.addClass('table-1').removeClass('table-0');
}
else
{
  x.addClass('table-0').removeClass('table-1');
}

它也使调试和更新变得更容易，因为你知道如果x是正确的，它总是正确的。你也可以更容易地检查它。

Answer 2

您是否已使用Firebug或WebKit的Web检查器检查了CSS级联顺序？

更新CSS类时，您需要注意cascading order。否则，它可能不会成为你所追求的效果。

Answer 3

看看这个小提琴。这是我认为你正在努力工作的精简版。 http://jsfiddle.net/edelman/ntPGb/1/

CSS不会随.addClass（）或.css（）动态更改

3 个答案: