javascript - 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 );
    }
} );