Skycons，不能显示相同的图标两次？ [英] Skycons, cant display the same icon twice?

问题描述

我已经将JavaScript插件Skycons连接到Yahoo天气RSS Feed。我遇到的问题是，多天可能有相同的天气预报，并且因为插件从ID而不是类，我无法拉第二次相同的图标。

I've hooked up the JavaScript plugin "Skycons" to Yahoo weather RSS feed. The problem I am having is that multiple days may have the same weather forecast and because the plugin pulls the icons from ID instead of class I am unable to pull the same icon a second time.

例如，以下所有图标都会显示在最后一个li实例之外 - 因为我重复了id：

For example, all icons below will show apart from the last li instance - because I have repeated the id snow:

<ul class="days">
       <li class="col-md-3 col-sm-3 col-xs-3"><strong>Saturday</strong>
             <canvas id="snow" width="50" height="50"></canvas>
             <span>19&deg;</span>
       </li>
       <li class="col-md-3 col-sm-3 col-xs-3"><strong>Sunday</strong>
             <canvas id="rain" width="50" height="50"></canvas>
             <span>19&deg;</span>
       </li>
       <li class="col-md-3 col-sm-3 col-xs-3"><strong>Monday</strong>
             <canvas id="sleet" width="50" height="50"></canvas>
             <span>19&deg;</span>
       </li>
       <li class="col-md-3 col-sm-3 col-xs-3"><strong>Wednesday</strong>
             <canvas id="snow" width="50" height="50"></canvas>
             <span>19&deg;</span>
       </li>
</ul>

这是我的init JS：

Here is my init JS:

<!--SkyCons-->  
<script type="text/javascript" src="js/vendors/skycons/skycons.js"></script> 
<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--; )
        icons.set(list[i], list[i]);

      icons.play();
    </script> 

，此处是指向引用的JS文件的链接：

and here is a link to the referenced JS file:

https://github.com/darkskyapp/skycons/blob/ master / skycons.js

推荐答案

您应该使用适用于元素引用的版本，而不是 id

You should use the version that works with element references instead of id

（并将html改为使用类别，而不是ids ）

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

并将您的HTML更改为

and change your html to

   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Saturday</strong>
         <canvas class="snow" width="50" height="50"></canvas>
         <span>19&deg;</span>
   </li>
   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Sunday</strong>
         <canvas class="rain" width="50" height="50"></canvas>
         <span>19&deg;</span>
   </li>
   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Monday</strong>
         <canvas class="sleet" width="50" height="50"></canvas>
         <span>19&deg;</span>
   </li>
   <li class="col-md-3 col-sm-3 col-xs-3"><strong>Wednesday</strong>
         <canvas class="snow" width="50" height="50"></canvas>
         <span>19&deg;</span>
   </li>

如果您需要支持IE8和更早版本，您需要使用此polyfill getElementsByClassName function： getElementsByClassName的Polyfill用于特定用途

If you need to support IE8 and older you need to use this polyfill for the getElementsByClassName function: Polyfill for getElementsByClassName for particular uses

这篇关于Skycons，不能显示相同的图标两次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！