Html/Css/Js：<i>標籤

Question

之前顯示文本這是一個相當簡單的問題，但我無法找到正確的解決方案。 我對我的單張地圖的圖例的工作，我能走到今天：

但是我想顯示前的顏色塊，僅4 AFER的色塊。 我使用i-tags創建顏色。整個JS代碼如下所示：

function getColor(d) 
      { 
       return d > 4 ? '#045a8d' : //4 
         d > 3 ? '#2b8cbe' : //3 
         d > 2 ? '#74a9cf' : //2 
         d > 1 ? '#bdc9e1' : //1 
            '#f1eef6'; 
} 
    ... 

    grades = [0, 1, 2, 3, 4]; 

... 


div.innerHTML += '0 '; 


    for (var i = 0; i < grades.length; i++) { 
     div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + (!grades[i + 1] ? grades[i] : '');} 

CSS：

.legend { 
    line-height: 18px; 
    color: #555; 
} 
.legend i { 
    width: 18px; 
    height: 18px; 
    float: left; 
    margin-right: 0px; 
    opacity: 0.7; 
} 

任何建議，就如何我可以顏色之前顯示的0？我敢打賭它很容易，但我所嘗試的所有東西迄今爲止都沒有工作。

Answer 1

因爲我是向左浮動，所以他們將0移到右邊。如果你看看http://jsfiddle.net/73k05k7u/我已經把0和1放到了一個跨度裏，並且把他們也放在了左邊。所以現在它全部顯示爲內聯。我也接受了呼叫，將循環添加到循環中，因爲您可以在循環完成時執行循環。使其更具可讀性並且所需的對比更少。 NB最佳實踐應該建立一個字符串並設置innerHTML屬性一次。

// CSS 
.legend span{ 
    float:left; 

} 

// JS 
div.innerHTML += '<span>0 </span>'; 


for (var i = 0; i < grades.length; i++) { 
    div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ';  
} 
div.innerHTML = div.innerHTML + '<span>' + (grades.length -1)+ '</span>';