Skycons, không thể hiển thị cùng một biểu tượng hai lần?

Question

Tôi đã kết nối plugin JavaScript "Skycons" với nguồn cấp dữ liệu RSS thời tiết của Yahoo. Vấn đề tôi gặp phải là nhiều ngày có thể có cùng dự báo thời tiết và vì plugin kéo các biểu tượng từ ID thay vì lớp tôi không thể kéo biểu tượng tương tự lần thứ hai.

Ví dụ, tất cả các biểu tượng bên dưới sẽ hiển thị ngoài các ví dụ li cuối cùng - bởi vì tôi đã lặp đi lặp lại id tuyết:

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

Đây là JS init của tôi:

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

và đây là liên kết đến tệp JS được tham chiếu:

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

Answer 1

Y ou nên sử dụng phiên bản làm việc với tài liệu tham khảo yếu tố thay vì id

(Và thay đổi html để sử dụng các lớp học thay vì id)

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

và thay đổi html của bạn để

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

Nếu bạn cần hỗ trợ IE8 trở lên, bạn cần phải sử dụng polyfill này cho hàm getElementsByClassName: Polyfill for getElementsByClassName for particular uses