如何在javascript中使用Skycons两次id

我用的是Skycons，它工作的非常好。但是当我有两个画布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的渲染，因为我不知道有多少次我将使用部分阴天。我希望这是有意义的，但请随时提出任何需要的问题

---

感谢您的帮助

id的全部要点是两个对象的id不能相同。这就像两本护照有着相同的号码——想象一下边境管制的混乱。HTML将始终忽略除第一个元素外的所有具有给定id的元素

---

改用类。这就是他们的目的。然后，当您通过

$（'.class-name'）

或

document.getElementByClassName（'class-name'）

搜索元素时，您会得到所需的结果。

id的全部要点是两个对象不能具有相同的id。这就像两本护照有着相同的号码——想象一下边境管制的混乱。HTML将始终忽略除第一个元素外的所有具有给定id的元素

改用类。这就是他们的目的。然后，当您通过

$（'.class-name'）

或

document.getElementByClassName（'class-name'）

搜索元素时，您会得到所需的结果。

发现：

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

var图标=新的天空图标({
“颜色”：“#73879C”
}),
列表=[
“晴朗的白天”、“晴朗的夜晚”、“部分阴天”，
“部分多云夜”、“多云”、“雨”、“雨夹雪”、“雪”、“风”，
“雾”
],
我
对于（i=list.length；i--；）{
var weatherType=列表[i]，
元素=document.getElementsByClassName（weatherType）；
对于（e=elements.length；e--；）{
图标集（元素[e]，天气类型）；
}
}
图标。play（）找到了以下内容：

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


var图标=新的天空图标({
“颜色”：“#73879C”
}),
列表=[
“晴朗的白天”、“晴朗的夜晚”、“部分阴天”，
“部分多云夜”、“多云”、“雨”、“雨夹雪”、“雪”、“风”，
“雾”
],
我
对于（i=list.length；i--；）{
var weatherType=列表[i]，
元素=document.getElementsByClassName（weatherType）；
对于（e=elements.length；e--；）{
图标集（元素[e]，天气类型）；
}
}
图标。play（）
这似乎是使用类而不是
id
s的明显例子。不应复制ID。不应复制超过“不应”的ID。HTML明确禁止这样做，任何使用ID的脚本都只能看到第一个元素。这似乎是使用类而不是
ID
s的一个明显例子。不应复制ID。不应复制超过“不应”的ID。HTML明确禁止这样做，任何使用ID的脚本都只能看到第一个元素。