javascript - 如何在 JavaScript 中使用 Skycons 两次使用 id

Question

我正在使用 Skycons，它工作得非常好。但是当我有 2 个 Canvas ID 时，它会渲染第一个，但另一个将为空白。

在 JS 中我有:

var icons = new Skycons({
            "color": "#73879C"
        }),
                list = [
                    "clear-day", "clear-night", "partly-cloudy-day",
                    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
                    "fog"
                ],
                i;

        for (i = list.length; i--; )
            icons.add(list[i], list[i]);

        icons.play();

所以当我需要 3 个图标时

<canvas id="rain" width="128" height="128"></canvas>
<canvas id="partly-cloudy-day" width="128" height="128"></canvas>
<canvas id="partly-cloudy-day" width="128" height="128"></canvas>

前两个将渲染，但第三个不会渲染，因为它已被使用两次(id)。我需要渲染所有相同的 id，因为我不知道要使用多少次晴天。我希望这是有道理的，但请随意提出任何需要的问题。

感谢您的帮助

Answer 1

发现这个:Skycons, cant display the same icon twice?

通过使用类而不是 ID，并像我链接的答案一样调整您的函数:

var icons = new Skycons({
        "color": "#73879C"
    }),
    list = [
        "clear-day", "clear-night", "partly-cloudy-day",
        "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
        "fog"
    ],
    i;

for (i = list.length; i--;) {
    var weatherType = list[i],
        elements = document.getElementsByClassName(weatherType);
    for (e = elements.length; e--;) {
        icons.set(elements[e], weatherType);
    }
}

icons.play();

JSFiddle:https://jsfiddle.net/yuriy636/egg7p7hr/