Question

我正在使用Skycons，它的工作非常好。但是，当我有2个画布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/

Answer 2

id的重点在于两个对象具有相同的ID。它就像两张同样号码的护照 - 想象一下边境管制的所有混乱。 HTML将始终忽略具有给定id的第一个元素。

改为使用类。这就是它们的用途。然后，当您按$('.class-name')或document.getElementByClassName('class-name')搜索元素时，您会得到所需的结果。

如何在使用Skycons的javascript中使用id两次

2 个答案: