Answer 1

另一种方法可以让你有多个数字类：

var p = 74; // your percentage from someplace
var colors = ['one','two','three']; // names of your css classes
var chosen = colors[0];
i = 1;
while(i < colors.length) { 
    var m = Math.round((i/colors.length) * 100); 
    if(p > m){   
        chosen = colors[i];
        i++;       
        continue;
    }
    break;
}
console.log(chosen) // chosen now contains the array var you want depending on % p

Answer 2

这是我的解决方案：http://jsfiddle.net/jKWFz/

var oMeter = $('.meter');
var percent = 100 * (oMeter.width() / $('#progress_bar').width());

if (percent < 33)
{
     oMeter.css('background-color', 'green');
}
else if (percent > 33 && percent <= 66)
{
     oMeter.css('background-color', 'orange');    
}
else
{
     oMeter.css('background-color', 'red');
}

编辑：如果内容是用AJAX加载的，你需要做的就是将上面的代码包装在一个函数中，并在加载内容时调用它。

例如：

更新了JSFiddle：http://jsfiddle.net/jKWFz/2/

function setupMeter() {
    var oMeter = $('.meter');
    var percent = 100 * (oMeter.width() / oMeter.closest('.meter-bg').width());

    if (percent < 33) {
        oMeter.css('background-color', 'green');
    }
    else if (percent > 33 && percent <= 66) {
        oMeter.css('background-color', 'orange');
    }
    else {
        oMeter.css('background-color', 'red');
    }
}

// Example when loading from AJAX:
$.get("some_content.html", function(data) {
    $('#container').html(data);
    setupMeter();
});