Loop over images in web font file

Question

Я создал файл веб-шрифтов, используя набор значков svg. Также сгенерирован связанный файл CSS, используя это приложение https://icomoon.io/.

Теперь я могу добавить отдельные изображения на веб-страницу, используя имя класса css, как в Fontawesome. Но каков правильный способ перебрать все эти изображения и показать все это с помощью javascript? Нужно ли нам создавать json-массив всех классов, а затем переходить в цикл?

Заранее спасибо.

Answer 1

Вы можете выбрать элементы DOM (divs, img и т. Д.) И циклически использовать JavaScript. Вы можете просто связать имя класса с каждым элементом 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; 
}