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

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

我已经更改了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);

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

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

最佳答案

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

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调用中。

关于javascript - Skycons/Dark Sky Forecast API，显示动态创建的DIV的动画图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35383686/