Skycons/Dark Sky Forecast API，为动态创建的 DIV 显示动画图标

Question

作为我的第一个使用 API 的应用程序，我决定使用 Dark Sky API。我正在尝试为我从 JS 文件生成的每个预测日添加动画 Skycons。我已经阅读了 StackOverflow 上有关 Skycon 问题的其他帖子，但我自己没有取得任何进展。

我已经更改了我的 initJS，以便按类名查找天气类型，但在附加图标方面仍然没有成功。

我在 HTML 中的脚本：

<script>
var icons = new Skycons({"color": "#fff"}),
      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();

如何创建包含图标的预测 div：

//HTML to append to document
      var html =
        '<div class="forecast-list"><ul class="list">' +
        '<li class="item" id="day">' + forecastDay + '</li>' +
                          //The canvas tag is where the SKYCON should show up
        '<li class="item"><canvas class="' + forecastIcon + '" width="128" height="128"></canvas></li>' +
        '<li class="item forecastTemp" id="max">' + forecastMax + '</li>' +
        '<li class="item forecastTemp" id="min">' + forecastMin + '</li>' +
        '</ul></div><br><br>';

      //Append HTML to document
      $('.forecast').append(html);

我的 codepen 的链接：http://codepen.io/DDD37/pen/GozGGx

Skycons 链接供参考：https://github.com/darkskyapp/skycons/blob/master/skycons.js

Answer 1

我发现我哪里出错了。我在错误的位置创建图标。这段代码...

var icons = new Skycons({"color": "#111"}),
      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 );
      console.log(elements);
for (e = elements.length; e--;){
    icons.set( elements[e], weatherType );
}
}

  icons.play();

...需要放在 AJAX 调用中。