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中使用，你需要确保你没有处于怪癖模式。

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

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

这适用于所有浏览器。

Answer 2

使用jQuery

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

Answer 3

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

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

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>

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

根据html内容更改样式

4 个答案: