Jquery根据数字内容更改对象的CSS类

Question

将动态输出百分比 0-100%

想要添加基于百分比的 CSS 类。红色表示 0%，蓝色表示 100%。

标记将是

<span class="blue">100%</span>

本来我是这么想的……

$("span:contains('100%')").css("color", "#0000ff");

但仅包含搜索第一个整数并为 1、2、3、4、5、6、7、8、9 应用不同的类 这种方法的唯一问题是单个数字将被视为与双数字相同。 IE 7% 和 70% 将具有相同的类并且不正确。

这些不是特定的数量，它们会一直动态变化。我不太擅长编写自己的 jquery，因此不胜感激。

Answer 1

演示： http://jsfiddle.net/JAAulde/GJh3j/

如果页面上有很多元素，包含将是一个非常昂贵的查询。 我会：

为所有元素添加一个类：

<span class="percent-holder">100%</span>
<span class="percent-holder">100%</span>
<span class="percent-holder">0%</span>
<span class="percent-holder">100%</span>

找到所有这些元素，分析它们的文本，做你想做的事：

$( '.percent-holder' ).each( function()
{
    var $this = $( this ),
        classToAdd = null;

    switch( $this.text() )
    {
        case '100%':
            classToAdd = 'blue';
            break;

        case '0%':
            classToAdd = 'red';
            break;
    }

    if( classToAdd !== null )
    {
        $this.addClass( classToAdd );
    }
} );

Answer 2

我认为使用:contains() 没有任何问题（请参阅http://jsfiddle.net/b3tUf/），但是如果您想更改代码，您总是可以只使用条件语句。

if( $("span").text() == "0%" ) {
    $("span").css("color", "#0000ff");
} elseif ( $("span").text() == "100%" ) {
    ...
}

或者对于类：

if( $("span").text() == "0%" ) {
    $("span").removeClass().addClass("red");
} elseif ( $("span").text() == "100%" ) {
    $("span").removeClass().addClass("blue");
}

Answer 3

如果你想自己手动管理百分比颜色，你可以这样做：

$('span').css('color', function() {
 var percentage = parseInt($(this).text());  
    switch(percentage){
        case 100:
          return "red";
        case 90:
          return "gray";                 
    }
});

示例：http://jsfiddle.net/niklasvh/zqwqe/

编辑：或者您可以动态计算颜色值，因此您不必单独定义每个百分比。

    $('<span />').appendTo($('body')).text(i+"%").css('color', function() {
        var percentage = parseInt($(this).text());  
        var colors = [Math.round(255*(percentage/100)),0,255-Math.round(255*(percentage/100))];
        return "rgb("+colors+")";   
        });

示例： http://jsfiddle.net/niklasvh/zqwqe/29/