根据 DIV 的宽度更改背景颜色

Question

我想使用 jQuery<div>根据 CSS 属性值动态修改 a 的背景颜色width。

该用法用于某种形式的颜色编码仪表，它指示设备在特定类别（有 5 个）中的表现有多好（或差），然后有一个“总体”类别，它根据一点数学知识（将所有 5 加起来，然后将答案除以 5）。

我尝试了两种方法，一种基于我所拥有的一点 jQuery 知识，另一种改编自 SO 上的答案。两者都包含在我提供的 JSFiddle 中，后者被注释掉了。

以下是每种颜色和宽度范围：

• 0-24% = 红色 - #a41818
• 25-49% = 橙色 - #87581c
• 50-74% = 黄色 - #997815
• 75-90% = 黄绿色 - #7ba01c
• 91-100% = 绿色 - #3a8d24

谢谢！

Answer 1

我建议：

$('.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 小提琴演示。