jQuery的語法： - 線性梯度（「顏色」，白色）以「色」爲變量

Question

我有依據給定的就是這樣的

ProgressBar.color = function(value, maxVal) { 
    var bcolor; 
    var color; 
    var percentage = (value/maxVal) * 100; 
    //For each percentage, different colors 
    if (percentage >= 0 && percentage < 25) { 
     bcolor = "green"; 
     color = "black"; 
    } else if (percentage >= 25 && percentage < 50) { 
     bcolor = "yellow"; 
     color = "green"; 
    } else if (percentage >= 50 && percentage < 75) { 
     bcolor = "orange"; 
     color = "blue"; 
    } else if (percentage >= 75 && percentage <= 100) { 
     bcolor = "red"; 
     color = "black"; 
    } 

    //Setters 
    $('#bar').css("background-color", bcolor); 
    $('#bar').css("color", color); 
}; 

一個百分比一個<div>改變其顏色但現在我想添加一些漸變效果。我的問題是：

• 什麼是-linear-gradient()語法當您使用變量的顏色？

我有這個，但它不工作：

$('#bar').css("background", "-moz-linear-gradient('bcolor', white, 'bcolor')"); 

Answer 1

你只需要Concat的變量如下：

$('#bar') 
    .css("background", "-moz-linear-gradient(" + bcolor + ", white, " + bcolor + ")"); 
//           ^^^^^^^^^^^^^^^  ^^^^^^^^^^^^^^ 

Answer 2

一個簡單的方法來做到這一點是使用字符串連接： "-moz-linear-gradient('" + bcolor + "', white, '" + bcolor + "')"