更改DIV背景颜色,具体取决于其宽度

时间:2013-11-30 21:13:56

标签: javascript jquery html css

我想使用jQuery动态修改<div>的背景颜色,基于其CSS属性width值。

用于某种形式的颜色编码的仪表,它表示设备在特定类别(有5个)中的表现(或不良),然后有一个“整体”类别,从而产生整体得分,基于一点点数学(将所有5个加在一起并将答案除以5)。

I have tried two methods,一个基于我拥有的小jQuery知识,另一个基于SO的答案。两者都包含在我提供的JSFiddle中,后者被注释掉了。

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

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

谢谢!

3 个答案:

答案 0 :(得分:4)

我建议:

$('.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 Fiddle demo

答案 1 :(得分:1)

存在一些语义问题(使用$(e)代替$(this)($(document).ready奇怪地嵌套),并且您使用的逻辑要求每个条形码的比例为&#39 ; s到父栏的宽度,而不是宽度本身。

试试这个: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");
        }
    });
});

答案 2 :(得分:1)

我建议您通过检查宽度从错误的位置开始,实际上您需要根据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