响应 div 数量的颜色深浅

Question

我正在一个职位公告板上工作，职位发布的数量一直在变化。但是，每个职位发布都应具有一种基色的分层阴影：#219BBE。 这是我要实现的目标的草图：

我需要的是一个 javascript 函数，它可以根据 job_boxes 的数量改变颜色的深浅。

到目前为止，我找到了一个用于生成 #219BBE 阴影的 javascript sn-p。

function calculateShades(colorValue) {
  "#219BBE" = colorValue;

// break the hexadecimal color value into R, G, B one-byte components
// and parse into decimal values.
// calculate a decrement value for R, G, and B based on 10% of their
// original values.
var red = parseInt(colorValue.substr(0, 2), 16);
var redDecrement = Math.round(red*0.1);

var green = parseInt(colorValue.substr(2, 2), 16);
var greenDecrement = Math.round(green*0.1);

var blue = parseInt(colorValue.substr(4, 2), 16);
var blueDecrement = Math.round(blue*0.1);

var shadeValues = [];
var redString = null;
var greenString = null;
var blueString = null;

for (var i = 0; i < 10; i++) {
  redString = red.toString(16); // convert red to hexadecimal string
  redString = pad(redString, 2); // pad the string if needed
  greenString = green.toString(16); // convert green to hexadecimal string
  greenString = pad(greenString, 2); // pad the string if needed
  blueString = blue.toString(16); // convert blue to hexadecimal string
  blueString = pad(blueString, 2); // pad the string if needed
  shadeValues[i] = redString + greenString + blueString;

// reduce the shade towards black
  red = red - redDecrement;
  if (red <= 0) {
    red = 0;
  }

  green = green - greenDecrement;
  if (green <= 0) {
    green = 0;
  }

  blue = blue - blueDecrement;
  if (blue <= 0) {
    blue = 0;
  }

}

shadeValues[10] = "000000";
return shadeValues;
}

我简化了这个问题的输出： HTML

<!-- Instead of 4 boxes we could also have n boxes -->
<div class="job_box"></div>
<div class="job_box"></div>
<div class="job_box"></div>
<div class="job_box"></div>

CSS

.job_box {
  width: 100%;
  height: 50px;

  /* The dynamic background-color */
  background-color: #219BBE;
}

要计算job_boxes 的数量，我会使用 jQuery：

var numBoxes = $('.job_box').length

这就是我卡住的地方。我知道我需要一个循环，但就是这样。你能把我推向正确的方向吗？

Fiddle

Answer 1

这是我的解决方案：DEMO

var n = 0;

$('.job_box').each(function() {
    n++;
    lighten($(this), n);
});

function lighten(that, n) {
    var lightenPercent = 15 / n;
    var rgb = that.css('background-color');
    rgb = rgb.replace('rgb(', '').replace(')', '').split(',');
    var red = $.trim(rgb[0]);
    var green = $.trim(rgb[1]);
    var blue = $.trim(rgb[2]);

    red = parseInt(red * (100 - lightenPercent) / 100);
    green = parseInt(green * (100 - lightenPercent) / 100);
    blue = parseInt(blue * (100 - lightenPercent) / 100);

    rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

    that.css('background-color', rgb);
}

另一方面，在为百分比设置 var 时，您可以通过将 / 更改为 * 来加深基色。

Answer 2

看看你的设计，应该只有有限数量的 div（比如 4-8 个），所以我个人会尽量保持简单并预先计算背景颜色并在 8 行 CSS 中实现它，而不是大量的 JavaScript。

例如

DIV.job_box:nth-child(0) { background-color: #219BBE; }
DIV.job_box:nth-child(1) { background-color: <nextcol>; }
DIV.job_box:nth-child(2) { background-color: <nextcol>; }
DIV.job_box:nth-child(3) { background-color: <nextcol>; }
DIV.job_box:nth-child(4) { background-color: <nextcol>; }
DIV.job_box:nth-child(5) { background-color: <nextcol>; }
DIV.job_box:nth-child(6) { background-color: <nextcol>; }

我知道这不是您的具体方法的答案，但我们经常走的路比他们需要的要复杂得多。

Answer 3

尝试将作业计数附加到对象。

像这样：

<div class="job_box" data-count="22"></div>
<div class="job_box" data-count="12"></div>
<div class="job_box" data-count="5"></div>
<div class="job_box" data-count="1000"></div>

然后得到所有的盒子：

var numBoxes = $('.job_box');

然后循环遍历它们：

numBoxes.each(function(){
    var jobCount = $(this).data("count");
    $(this).css("background-color",'#'+calculateShades(jobCount)); 
});