jquery - Récupère un attribut html depuis un appel de fonction

Question

J'essaie d'appeler une info-bulle différente en fonction de l'attribut id d'une balise d'ancrage. Mon code JavaScript est comme suit:

$(function() 
{ 
    $('.tippy').qtip(
    { 
     content: { 
      url: "http://mydomain.com/product/mini/" + $(this).attr("id") // doesn't work 
     }, 

     hide: { when: 'mouseout', fixed: true }, 

     position: { 
     corner: { 
      target: 'bottomRight', 
      tooltip: 'topLeft' 
     } 
     } 
    }); 

}); 

mon code html ressemble à ceci:

<div>this is the text and I would like to reference the <a href="product.php" class="tippy" id="123456">superproduct</a> with qtip.</div> 

Je suis coincé, pourriez-vous me donner un coup de main s'il vous plaît?

Answer 1

Utilisation each():

$('.tippy').each(function() { 
    $(this).qtip({ 
      content: { 
       url: "http://mydomain.com/product/mini/" + $(this).attr("id") 
      }, 
      hide: { when: 'mouseout', fixed: true }, 
      position: { 
      corner: { 
       target: 'bottomRight', 
       tooltip: 'topLeft' 
      } 
      } 
    }); 
)}; 

---

La raison pour laquelle $(this) ne fonctionne pas dans votre code est simple: Il est pas dans un appel de fonction (au moins pas où this doit se référer à un .tippy élément). $(this).attr() est exécuté lorsque vous construisez l'objet qui est passé à qtip(). Cela signifie que c'est dans le même contexte que $('.tippy') et par conséquent this se réfère très probablement à window.