jquery - 防止 jQuery 改变背景颜色

Question

我正在使用 jQuery 更改表格中偶数行的 background-color:

$("table tbody tr:nth-child(even)").css("background-color", "#F1F1F1");

现在我想根据一些 PHP 任务的结果为我的 tr 设置另一种颜色。

<tr
    <?php
        // Some tasks to see whether background-color should change or not
        if (yes) echo "style='background-color:#A60000;'"
    ?>
>

但它不起作用，因为 jQuery 覆盖了颜色并将其设置回 #F1F1F1。有什么办法可以防止 jQuery 这样做吗？或者我也应该使用 jQuery？

Answer 1

不要使用$.css 来添加颜色，而是使用addClass 来向行添加类。在 PHP 中，还添加一个类而不是内联样式。

然后，在您的样式表中，您可以相应地设置行的样式:

/* The class that is added by JQuery */
.jqueryclass {
  background-color: #F1F1F1;
}

/* The class that is added by PHP, even if jquery added a class too. */
.phpclass, .phpclass.jqueryclass {
  background-color: #A60000;
}

它更干净，更易于维护。您可以让 CSS 决定特定类组合的样式，而无需在 javascript 或 PHP 中进行复杂且令人困惑的检查。

如果此时您确实有一个 CSS 文件，您可以添加 CSS 类来设置交替行的样式。这样，它就可以在禁用了 javascript 的浏览器上运行。随着时间的推移，当不支持这种风格的浏览器已经绝迹时，您可以完全摆脱 JQuery 代码。