Skycons, cant wyświetlają tę samą ikonę dwa razy?

Question

Podłączyłem wtyczkę JavaScript "Skycons" do pogody Yahoo RSS. Problem polega na tym, że wiele dni może mieć tę samą prognozę pogody i ponieważ wtyczka pobiera ikony z ID zamiast z klasy, nie jestem w stanie pobrać tej samej ikony po raz drugi.

Na przykład, wszystkie poniżej ikony pokaże oprócz przykład ostatni li - bo powtórzył śnieg 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> 

Oto moja startowych 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> 

i tu jest link do odwołania pliku JS:

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

Answer 1

Y ou powinny korzystać z wersji, która współpracuje z odniesieniami elementów zamiast id

(i zmienić html użyć klasy zamiast identyfikatorów)

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

i zmienić html do

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

Jeśli potrzebujesz obsługi IE8 i starszych, musisz użyć tej funkcji do funkcji getElementsByClassName: Polyfill for getElementsByClassName for particular uses