jQuery Girl
  1. jQuery Girl
  3. Utilisation de ‘each’ pour obtenir un lien à insérer dans une info-bulle jQuery
Intereting Posts
Itérer à travers chaque élément de texte d’une page? Problème de limite de longueur d’URL de WCF GET: requête incorrecte – URL non valide Modifier par programme les émissions jQuery Mobile de première page Utilisez jQuery pour changer une classe en fonction de la position de défilement Existe-t-il un événement Javascript qui se déclenche lorsqu’un élément HTML défile dans l’affichage? balise vidéo html5 ne fonctionne pas dans Android phonegap Jquery AJAX: aucun en-tête ‘Access-Control-Allow-Origin’ n’est présent sur la ressource demandée Même date et heure dans les fuseaux horaires du navigateur – sur un moteur de réservation Comment détecter un événement JQuery déclenché? gérer des cookies volumineux ou utiliser un stockage local – jquery et le plugin cookie jquery Si je vérifie si la page est chargée, jQuery Mobile ne fonctionne pas Comment modifier le comportement de surbrillance par défaut des balises SELECT dans IE et Opera? jQuery $ .ajax a réussi son dernier tirage Mettez en surbrillance le lien actif à l’aide de jQuery jQuery, utilise ~ comme partie de id – comment?

Utilisation de ‘each’ pour obtenir un lien à insérer dans une info-bulle jQuery

J’utilise cette info-bulle de jquerytools: 

$("li img").tooltip({ position: "bottom right"});

et souhaitez y insérer un lien à partir d’un lien “Plus d’infos” existant dans le même lien: 

 var morelink; morelink = $(this).find("li a").attr("href"); $(".tooltip").append('More Info');

le voici dans un violon raté:

http://jsfiddle.net/nathanbweb/tEVnt/

Comment enchaîner les deux, ou utiliser .each, pour obtenir le bon lien dans l’info-bulle?

Ce n’est pas particulièrement facile en raison de la façon dont les info-bulles sont ajoutées et il ne semble pas y avoir de lien direct entre l’object et l’info-bulle qui soit facile à comprendre.

Ce qui est légèrement plus facile à faire est quelque chose comme ceci, ajoutez le lien au titre, avant qu’il ne devienne une info-bulle: 

 // add tooltip from jquerytools $("li img").each(function(){ var obj = $(this); var link = obj.next('a').attr('href'); if (link !== undefined) { var title = obj.attr('title'); title = title+' More Info'; obj.attr('title', title); } obj.tooltip({ position: "bottom right",}); });
  • Passer par chaque li qui a un img
  • Obtenez le prochain object qui dans votre cas est une ancre
  • Obtenez le lien de l’ancre
  • Vérifiez que le lien est en fait un lien (il y en a sans lien)
  • S’il y avait un lien, ajoutez-le au titre (qui deviendra l’info-bulle)
  • Enfin append l’info-bulle

Voyez-le travailler ici

Votre meilleur choix serait probablement de créer votre propre info-bulle pour chaque image. 

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt rhoncus risus sed rhoncus.
 More Info

Construisez l’info-bulle comme: 

 $(".tooltip").each(function(){ var obj = $(this); obj.append(obj.prev().attr("title"), obj.next().clone()); });

Selon la documentation de jQuery-tools, l’ajout d’un conteneur .tooltip juste après l’élément envoyé au plug-in devrait suffire.

Mettez ce code: 

 $.fn.outerHtml = function() { if (this.length) { var div = $('
'); var clone = $(this[0].cloneNode(false)).html(this.html()).appendTo(div); var outer = div.html(); div.remove(); return outer; } else return null; }; $('li').each(function(){ $(this).children("img").attr("title", $(this).children("img").attr("title") + $(this).children("a").outerHtml()); });

Juste avant 

 $("li img").tooltip({ position: "bottom right"});

Cela crée une extension .outerHtml à jquery qui vous permet d’obtenir le code HTML complet d’un élément. Ensuite, nous l’ajoutons au titre AVANT qu’il soit transformé en info-bulle.

Je viens de l’essayer sur votre clavier et cela fonctionne bien.