顏色陰影響應div的數量

Question

我正在工作板上工作發佈數量不斷變化。但是，每個工作職位應該有一個基本顏色的分層陰影：#219BBE。 這裏是什麼，我想實現一個草圖：

我需要的是一個JavaScript函數，它改變取決於job_box ES數量顏色的深淺。

到目前爲止，我找到了一個用於生成#219BBE色調的javascript代碼片段。

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_box ES我會使用量的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); 
} 

另一方面，在設置變量百分比時，可以通過將/更改爲*來使基色變暗。

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)); 
});