如何更改特定单词的 CSS？

Question

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

用文字来形容： 我想改变一个类中特定单词的颜色。

示例： 如果该类包含单词 Online 它将使其变为绿色。 如果该类包含单词 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 类将在线或离线填写关于服务器响应的单词（已经完成）。

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

我很确定我必须使用此功能，但仅此而已。

$( 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 颜色。

Answer 2

感谢您发布图片。它真的把事情弄清楚了。

这是一个 jQuery 解决方案。我不确定每页是否有多个状态，所以我让它工作以防万一你有多个。

$(document).ready(function() {
      var status = $(".status");
      status.each(function(index) {
          if ($(this).text() == "Online") {
            $(this).css("color", "green");
          } else {
            if ($(this).text() == "Offline") {
              $(this).css("color", "red");
            } // end if
          } // enf else
        }); // end each
      }); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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">Offline</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>

如果没有jQuery selecor.each() 上的有用文档，我无法做出这个答案。

Answer 3

@Joel 的回答要好得多，但既然您要求 jQuery 中的解决方案，这会有所帮助。

$( document ).ready(function() {
     var status = $('.status');
     if(status.hasClass('voltz-online')) {
          status.css('color', 'green');
     } else if (status.hasClass('voltz-offline')) {
          status.css('color', 'red');
      } 
});