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