javascript - 循环网络字体文件中的图像

Question

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

现在我可以像在 Fontawesome 中一样使用 css 类名将单个图像添加到网页中。但是循环遍历所有这些图像并使用 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;
}