Question

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

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

循环在web字体文件中的图像

1 个答案: