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

Question

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

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

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

Answer 1

这里将是我的解决方案：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(); 
}); 

Answer 2

另一种方式来做到这一点，它会让你有多个类号：

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