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应用不同的类这种方法唯一的问题是单个数字的数字将被视为double。 IE 7％和70％将具有相同的类，并且不正确。

这些不是特定金额，它们会一直动态变化。我不是很擅长编写自己的jquery，所以感谢任何帮助。

Answer 1

DEMO： 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/

Jquery基于数字内容更改对象的CSS类

3 个答案: