jquery - 根据 html 内容更改样式

Question

我有一个看起来像这样的 html 片段：

FIELD STATUS: <span class="field-status">CLOSED</span>

或者有时看起来像这样：

FIELD STATUS: <span class="field-status">OPEN</span>

我如何根据内容将 CLOSED 设为红色，将 OPEN 设为绿色。这是我无法控制的更大系统的一部分，但我可以调整 HTML 源代码。如果那是最好的方法，我想我可以在那里得到一些 jQuery。

Answer 1

如果您可以更改 HTML 和 CSS，您应该像这样设置它，

FIELD STATUS: <span class="field-status closed">CLOSED</span>
FIELD STATUS: <span class="field-status open">OPEN</span>

.field-status.closed { color: red; }
.field-status.open{ color: green; }

要在 IE7 和 IE8 中进行这项工作，您需要确保您没有处于 quirks 模式。

---

如果你不能这样做，你可以使用 jQuery 来添加这些类。

$('.field-status').each(function(){
    var $this = $(this), text = $this.text(); 
    $this.addClass(text.trim().toLowerCase());
});

这适用于所有浏览器。

Answer 2

您可以使用 jQuery 直接在元素上设置 CSS。

$('.field-status').each(function() { 
   var value = $(this).text();
   if(value == 'CLOSED') {
      $(this).css('color', 'red'); 
   } else { 
      $(this).css('color', 'green'); 
   }
});

Answer 3

使用 jQuery

$(".field-status:contains('CLOSED')").css('color', 'red');

Answer 4

在您的 CSS 中，您可以放置​​：

.field-status-open{
 color:green;
}

.field-status-closed{
color:red;
}

在你的 HTML 中是这样的：

FIELD STATUS: <span class="field-status-closed">CLOSED</span>

FIELD STATUS: <span class="field-status-open">OPEN</span>

然后您可以添加一些脚本，它是否应该包含它将包含的字段类。