循环浏览网页字体文件中的图像

Question

我使用一组 svg 图标创建了一个网络字体文件。还使用此https://icomoon.io/ 应用程序生成了关联的 CSS 文件。

现在我可以像在 Fontawesome 中一样使用 css 类名将单个图像添加到网页中。但是，循环所有这些图像并使用 javascript 显示它们的正确方法是什么？我们需要创建一个包含所有类名的 json 数组然后循环吗？

提前致谢。

Answer 1

您可以选择您的 DOM 元素（div、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;
}