jquery - 如何更改特定单词的 CSS？

Question

我一直在寻找这个答案，但找不到任何关于这个的具体信息。

用一句话来概括:我想更改类(class)中特定单词的颜色。

例子:如果该类包含“在线”一词，它将使其变为绿色。如果该类包含 Offline 一词，它将使其变为红色。

现在是代码:

<section class="even">
                <h5>Voltz 2.0.4</h5>
                <span class="tag version"><span>1.5.2</span></span>
                <div class="serverinfo">
                    <p>Status: <span class="status"></span></p>
                    <p>Players: <span class="voltz-onlineplayers"></span>/<span class="voltz-maxonlineplayers"></span></p>
                    <p>IP: voltz.arcadia.eu</p>
                </div>
                <a class="button" href="vote.html#voltz">Vote</a>
                <a class="button" href="modpacks.html#voltz">Modpack Info</a>
            </section>

类 voltz-online 将根据服务器的响应填写在线或离线字词(已经完成)。

但我想检查类(class)状态是否包含在线或离线一词。我不完全确定我应该使用什么来获得这种效果。

我很确定我必须使用这个功能，但就我所知。

$( document ).ready(function() {
        //code to change color here.
    });

如果有人能用示例代码对此进行解释，我会很棒。如果您缺少信息，请随时提问

编辑:举一个直观的例子来说明我想让事情变得更简单的意思。

我希望突出显示的文本在显示在线时变为绿色，在显示离线时变为红色。

Answer 1

您实际上可以使用 CSS 轻松地做到这一点。

[class*=online] {
  color: green;
}
[class*=offline] {
  color: red;
}

此 CSS 选择器正在寻找具有名为 class 属性的任何元素，并且 *= 告诉浏览器查看以下字符串是否存在于该属性值中的任何位置.

因此，任何名称为 something-online 或 offline-something 或任何组合的类都将被此选择器匹配。

您可以将相同的选择器与 jquery 一起使用并设置 css 样式，但不需要为此使用脚本。

编辑:

感谢 UndoingTech 提供了指向属性选择器引用的链接。我将其包含在答案中，以便更容易找到 http://www.w3schools.com/css/css_attribute_selectors.asp

属性选择器非常强大，但经常被忽视。由于 jQuery 使用 CSS 选择器，所有属性选择器也可以在脚本中使用。

编辑:

根据对原始问题的澄清，这是根据元素内的文本更改具有特定类的元素的 color 样式的正确解决方案。

$(function() {
  $(".status").each(function() {
    var text = $(this).text().trim().toLowerCase();
    if (text === "offline") {
      $(this).css("color", "red");
    } else if (text === "online") {
      $(this).css("color", "green");
    }
  });
});

此代码找到所有具有 .status 类的元素，然后 .each() 循环遍历每个元素并为每个元素调用一次内联函数。此函数修剪所有文本并将其转换为小写，然后将该文本的值与“离线”或“在线”进行比较，然后相应地设置元素的 css 颜色。