Skycons, non posso visualizzare la stessa icona due volte?

Question

Ho collegato il plugin JavaScript "Skycons" al feed RSS di Yahoo. Il problema che sto avendo è che più giorni potrebbero avere le stesse previsioni del tempo e poiché il plugin estrae le icone dall'ID anziché dalla classe non riesco a tirare la stessa icona una seconda volta.

Per esempio, tutte le icone di seguito vi mostrano a parte l'istanza ultima Li - perché ho ripetuto la neve ID:

<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> 

Ecco il mio 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> 

e qui è un collegamento al file JS riferimento:

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

Answer 1

Y ou dovrebbe utilizzare la versione che funziona con elemento riferimenti invece di id

(e cambiare il codice HTML da usare classi invece di id)

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

e cambiare tuo html per

<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> 

Se è necessario supportare IE8 e versioni precedenti, è necessario utilizzare questo polyfill per la funzione getElementsByClassName: Polyfill for getElementsByClassName for particular uses