更改DIV背景颜色，具体取决于其宽度
我想使用jQuery动态修改
的背景颜色，基于它的CSS属性，
width值。
用途是用于某种forms的颜色编码的仪表，它表示设备在特定类别（有5个）中表现得如何（或差），然后有一个“整体”类别，它产生总体得分，基于在一个小数学上（将所有5个加在一起并将答案除以5）。
我尝试了两种方法 ，一种是基于我拥有的小jQuery知识，另一种是基于SO的答案。 两者都包含在我提供的JSFiddle中，后者被注释掉了。
以下是每种颜色和宽度范围：
- 0-24％=红色 – ＃a41818
- 25-49％=橙色 – ＃87581c
- 50-74％=黄色 – ＃997815
- 75-90％=黄绿色 – ＃7ba01c
- 91-100％=绿色 – ＃3a8d24
谢谢！
我建议：
$('.rating-bar').css('background-color', function(){ var percentage = parseInt($(this).data('size'), 10); if (percentage > 0 && percentage < 25){ return '#a41818' } else if (percentage > 24 && percentage < 50) { return '#87581c'; } else if (percentage > 49 && percentage < 75) { return '#997815'; } else if (percentage > 74 && percentage < 90) { return '#7ba01c'; } else if (percentage > 89 && percentage <= 100) { return '#3a8d24'; } });
JS小提琴演示 。
有一些语义问题（ $(e)代替$(this) ， ($(document).ready嵌套奇怪），你使用的逻辑要求每个条的宽度与父条的比例，而不是宽度本身。
试试这个： http ： //jsfiddle.net/VFSUN/1/
$(document).ready(function () { var bar = $('.rating-bar'); bar.css("background-color", "#7ba01c"); var parentWidth = parseInt($('.rating-bar-bg').css("width")); $('.rating-bar').each(function () { var e = $(this).css("width"); e = parseInt(e); ratio = e / parentWidth * 100; if (ratio <= 24) { $(this).css("background-color", "#a41818"); } else if (ratio >= 25 && e < 50) { $(this).css("background-color", "#87581c"); } else if (ratio >= 50 && e < 75) { $(this).css("background-color", "#997815"); } else if (e >= 75 && e < 91) { $(this).css("background-color", "#7ba01c"); } else if (ratio >= 91) { $(this).css("background-color", "#3a8d24"); } }); });
我建议你通过检查宽度从错误的点开始，实际上你需要根据data-size属性设置宽度。 然后可以使用此大小来设置背景颜色
$(document).ready(function() { $('.rating-bar').each(function(){ var $bar=$(this), size=$bar.data('size'); $bar.width(size+'%').css("background-color", getBackground( size)) }); }); function getBackground( e){ var color= "#a41818";/* < 24*/ if (e >= 25 && e < 50) { color= "#87581c"; } else if (e >= 50 && e < 75) { color= "#997815"; } else if (e >= 75 && e < 91) { color= "#7ba01c"; } else if (e >= 91) { color= "#3a8d24"; } return color }
DEMO