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()循环遍历每个元素，并为每个元素调用内联函数一次。此函数修剪并将所有文本转换为小写，然后将该文本的值与“offline”或“online”进行比较，然后相应地设置元素的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');
      } 
});

jquery更改特定单词的CSS

3 个答案: