Javascript Girl
  1. Javascript Girl
  3. Skycons, ne peut-il pas afficher la même icône deux fois?
Intereting Posts
Comment réinitialiser les données et la vue de l'entrée enfant sur le clic du bouton du parent, cliquez? Jquery droppable accept Boucler les réseaux de tableaux Le clavier iOS sans le bouton Précédent, Suivant, Terminé pour le champ de saisie HTML? Pourquoi le code MutationObserver n'est-il pas exécuté sur Chrome 30? Comment puis-je écrire un service Angular 2 avec CORS en ion? Mettre le curseur après l'élément de portée à l'intérieur de la division contente Supprimer un tiret long d'une chaîne dans JavaScript? Node.js – Système de fichiers obtenez le type de fichier Obtenir une valeur aléatoire à partir d'un tableau JavaScript Pourquoi la méthode `this` change-t-elle lorsque vous appelez une référence à la méthode d'un objet? Quelle est la meilleure façon de couper () dans javascript Angulaire 2 en-têtes et données Jest / React – Comment utiliser l'objet global dans les tests unitaires? Comment détecter le support JSON dans javascript?

Skycons, ne peut-il pas afficher la même icône deux fois?

J'ai branché le plugin JavaScript "Skycons" au flux RSS de temps de Yahoo. Le problème que j'ai, c'est que plusieurs jours peuvent avoir les mêmes prévisions météorologiques et parce que le plugin tire les icônes de l'ID au lieu de la classe, je ne parviens pas à tirer la même icône une deuxième fois.

Par exemple, toutes les icônes ci-dessous apparaîtront en dehors de la dernière instance li – parce que j'ai répété la neige 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>

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

Et voici un lien vers le fichier JS référencé:

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

Vous devez utiliser la version qui fonctionne avec les références d'élément au lieu de l' id

( Et modifiez le html pour utiliser les classes au lieu des ID ) 

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

Et modifiez votre html pour 

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

Si vous devez prendre en charge IE8 et plus tard, vous devez utiliser ce polyfill pour la fonction getElementsByClassName : Polyfill pour getElementsByClassName pour des utilisations particulières