在Web字體文件中循環顯示圖像

Question

我已經使用一組svg圖標創建了一個Web字體文件。還使用這個https://icomoon.io/應用程序生成關聯的CSS文件。

現在我可以使用css classname像Fontawesome中那樣將單個圖像添加到網頁中。但什麼是適當的方式來遍歷所有這些圖像，並使用JavaScript顯示全部？我們是否需要創建一個包含所有類名的json數組，然後循環？

在此先感謝。

Answer 1

您可以使用JavaScript選擇您的DOM元素（div，img等）和循環。 您可以簡單地將每個DOM元素（它將用作過濾器）關聯一個類名稱，並在循環中選擇每個DOM元素（下面的一個簡短示例）。

或者，您可以有一個JSON，在那裏定義您的DOM元素。再一次，您需要在JSON數組中循環，選擇DOM元素並在每個元素上應用您的操作。 在我看來，使用JSON的這種最新方法非常適合您的使用情況，並且對document.querySelectorAll（）的結果進行簡單循環將完成工作。

http://jsfiddle.net/ppgrayry/2/

<div class="icon">icon</div> 
<div class="icon">icon</div> 
<div class="icon">icon</div> 
<div class="icon">icon</div> 
<div class="icon">icon</div> 
<div class="icon">icon</div> 


var elms = document.querySelectorAll('.icon'); 
for(var i = 0; i < elms.length; i++) { 
    elms[i].classList.add('icon-active'); 
} 


.icon { 
    width: 50px; 
    height: 50px; 
    background-color: yellow; 
} 
.icon-active { 
     background-color: red !important; 
}