Javascript Girl
  1. Javascript Girl
  3. JQuery update image src sur le vol stationnaire
Intereting Posts
Ensemble de données de changement et de transition dans le diagramme d'accords avec D3 Trouvez Javascript qui modifie l'élément DOM Pourquoi utiliser des données 1×1 pixel GIF (web bugs)? Toute alternative à l'utilisation d'execCommand pour mettre en surbrillance HTML dans le lecteur ebook iOS Analysez une chaîne contenant des liaisons de données dans AngularJS Les noms d'étiquettes ne sont pas affichés à partir des données d'entrée dans le tableau de transition tarte de d3.js Impossible de charger l'extension c ++ bson La sélection de la sélection multiple jqGrid persiste après la pagination, la recherche de la barre d'outils ou le filtre Générer pdf à partir de HTML en div à l'aide de Javascript Comment puis-je détecter IE10 de JS lorsque le mode navigateur est IE9? Pourquoi utiliser l'opérateur unaire sur un tableau donne des résultats incohérents dans javascript? L'utilisation du sélecteur jQuery et setSelectionRange n'est pas une fonction Babel ignore plusieurs répertoires Jquery keyup ne fonctionne pas sur Android Jqgrid recherche / filtre

JQuery update image src sur le vol stationnaire

Je ne veux pas que les images se chargent jusqu'à ce que le lien se déplace, alors, voilà le script, mais ça ne fonctionne pas, quelqu'un peut-il m'aider à corriger cela? J'ai ajouté un auditeur d'événement à chaque lien, et sur mouseover appelé une fonction qui définit l'image. Pour rendre les choses plus intéressantes, nous pouvons copier lazyload un peu ici et utiliser également la propriété data-original 🙂

Par exemple: c'est le code HTML: 

<li> <a href="#" class="tip_trigger"> <img class="tip" alt="300 Grams" data-original="https://lh5.googleusom/-qCRpw.../300%2520.jpg" src='empty.gif' width="90" height="90"/> Alex </a> </li>

Ensuite, ajoutez un auditeur d'événements:

Code: 

 // call for each element with the class 'tip' that's being hovered upon $('.tip').hover(function() { // retrieve the image inside this element var elem = $(this).find('img'); // set the 'src' to the 'data-original' value elem.attr('src', elem.attr('data-original')); });

Pour une démonstration en direct, vous pouvez voir cette page http://bloghutsbeta.blogspot.com/2012/04/testing-slidernav.html la partie ci-dessus du script est uniquement ajoutée à la première lettre ALEX dans la catégorie 'A'.

.tip est déjà l'image afin que vous ne puissiez pas trouver une image avec $(this).find('img');

Essayez à la place 

 $('.tip_trigger').hover(function() { // retrieve the image inside this element var elem = $(this).find('img'); // set the 'src' to the 'data-original' value elem.attr('src', elem.data('original')); });

Utilisez également la méthode .data() au lieu de .attr()

var elem = $(this).find('img'); <- vous recherchez une image lorsque c'est l'image.

Remplacez l'élément que vous attachez au volant vers 

 $('.tip_trigger').hover(function() { // retrieve the image inside this element var elem = $(this).find('img'); // set the 'src' to the 'data-original' value elem.attr('src', elem.attr('data-original')); });

Ou gardez-le comme ça et ne cherchez pas une image 

 $('.tip').hover(function() { var elem = $(this); // set the 'src' to the 'data-original' value elem.attr('src', elem.attr('data-original')); });

Vous avez lié le pivot à l'élément img, de sorte que vous ne pouvez pas trouver un enfant img. Utilisez simplement ceci ou changez le volant vers .tip_trigger. 

 $('.tip_trigger').hover(function() // That should do the trick { // retrieve the image inside this element var elem = $(this).find('img'); // set the 'src' to the 'data-original' value elem.attr('src', elem.attr('data-original')); });

JQuery.find () recherche des enfants. Vous avez déjà trouvé l'img avec votre ".tip" -selector. 

 var elem = $(this);