jQuery：根据内联样式宽度更改css颜色

如果我有这个html，我将如何根据宽度更改颜色

    <div id="progress_bar" class="meter-bg">
        <div class="meter" style="width: 67%;">
        </div>
    </div>

---

例如，如果宽度介于0和33%之间，则为绿色。如果是33%-66%的橙色。如果它是66%-100%红色。

以下是我的解决方案：

var-oMeter=$（'.meter'）；
变量百分比=100*（计量器宽度（）/$（“#进度条”）.width（）；
如果（百分比<33）
{
css（“背景色”、“绿色”）；
}
否则，如果（百分比>33&&百分比33&&百分比另一种方法允许您有多个数字类：

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

var p=74；//你从某处得到的百分比
var colors=['one'，'two'，'three']；//css类的名称
选择的变量=颜色[0]；
i=1；
而（im）{
选择=颜色[i]；
i++；
继续；
}
打破
}
console.log（selected）//selected现在包含您想要的数组变量，具体取决于%p
这一切都很好。我可以问一下……如果通过ajax加载内容，我该怎么办？抱歉！添加了一个从ajax加载内容的示例，加载内容后需要设置进度条。
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();
});

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