用宽度（百分比）更改div的背景颜色

Question

这是我的html和我的（不正确工作）脚本：

＆＃13;

＆＃13;

$( ".bar" ).each( function(){
        var bar = $(".bar").width() / $('.bar').parent().width() * 100;
        var color = '#f5f5f5';
        if (!isNaN(bar)) {
            if (bar > 0) {
                color = 'red';
                alert("0");
            }
            if (bar >= 25) {
                color = 'yellow';
                alert("25");
            }
            if (bar >= 50) {
                color = 'blue';
                alert("50");
            }
            if (bar >= 75) {
                color = 'green';
                alert("75");
            }
            $(this).css({'background' : color});
        }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bar" style="width: 70%; background: #5283b8;"></div>
<div class="bar" style="width: 33%; background: #5283b8;"></div>
<div class="bar" style="width: 54%; background: #5283b8;"></div>
<div class="bar" style="width: 80%; background: #5283b8;"></div>
<div class="bar" style="width: 12%; background: #5283b8;"></div>

＆＃13;

＆＃13;

＆＃13;

我也创造了一个小提琴： https://jsfiddle.net/71rgm4sy/

我的失败是什么？

Answer 1

您可以在此处引用所有栏：

var bar = $(".bar").width() / $('.bar').parent().width() * 100;

你在这里正确引用了单个栏：

$(this).css({'background' : color});

第一行应使用$(this)。你真的应该使用if（）/ else if（）

＆＃13;

＆＃13;

$(".bar").each(function() {
  var bar = $(this).width() / $(this).parent().width() * 100;
  var color = '#f5f5f5';
  if (!isNaN(bar)) {
    if (bar >= 75) {
      color = 'green';
    }
    else if (bar >= 50) {
      color = 'blue';
    }
    else if (bar >= 25) {
      color = 'yellow';
    }
    else {
      color = 'red';
    }    
    $(this).css({
      'background': color
    });
  }
});

＆＃13;

.bar {
  height: 3rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bar" style="width: 70%; background: #5283b8;"></div>
<div class="bar" style="width: 33%; background: #5283b8;"></div>
<div class="bar" style="width: 54%; background: #5283b8;"></div>
<div class="bar" style="width: 80%; background: #5283b8;"></div>
<div class="bar" style="width: 12%; background: #5283b8;"></div>
And thats my (not correctly working) script:

＆＃13;

＆＃13;

＆＃13;

Answer 2

更新的脚本应如下所示：

$( ".bar" ).each( function(){
    var bar = $(this).width() / $(this).parent().width() * 100;
    var color = '#f5f5f5';
    if (!isNaN(bar)) {
        if (bar > 0) {
            color = 'red';
            alert("0");
        }
        if (bar >= 25) {
            color = 'yellow';
            alert("25");
        }
        if (bar >= 50) {
            color = 'blue';
            alert("50");
        }
        if (bar >= 75) {
            color = 'green';
            alert("75");
        }
        $(this).css({'background' : color});
    }
});

您在获取宽度时引用了第一个元素，而不是.each(function(){})的当前元素。

Answer 3

$( ".bar" ).each( function(){
        // Changed line below to reference $(this) as it was selecting the first element every time
        var bar = $(this).width() / $('.bar').parent().width() * 100;
        var color = '#f5f5f5';
        if (!isNaN(bar)) {
            if (bar > 0) {
                color = 'red';
                // alert("0");
            }
            if (bar >= 25) {
                color = 'yellow';
                // alert("25");
            }
            if (bar >= 50) {
                color = 'blue';
                // alert("50");
            }
            if (bar >= 75) {
                color = 'green';
                // alert("75");
            }
            $(this).css({'background' : color});
        }
});

body {
  width:100%;
  margin:0;
  padding:0;
}

.bar {
  height:10px;
  margin-bottom:10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="bar" style="width: 70%; background: #5283b8;"></div>
<div class="bar" style="width: 33%; background: #5283b8;"></div>
<div class="bar" style="width: 54%; background: #5283b8;"></div>
<div class="bar" style="width: 80%; background: #5283b8;"></div>
<div class="bar" style="width: 12%; background: #5283b8;"></div>

它只选择第一个元素。致力于解决方案。