jQuery tooltip + contenu ajax

Question

J'essaie d'implémenter une simple info-bulle de survol pour les images sur une page où lorsque vous survolez une image, vous obtenez une petite fenêtre d'info-bulle et le contenu est chargé depuis AJAX.

Je peux bidouiller ensemble rapidement mais je voulais une manière élégante de le faire sans utiliser de JS en ligne. Donc, ma question est la suivante: Si je capture l'événement rollover dans mon fichier .js externe, comment puis-je passer l'ID de la base de données?

J'utilise jQuery et je voudrais donc faire quelque chose comme ceci:

$('.item_roll').mouseover(function() { 
    //show tooltip and load ajax content 
} 

et mon HTML serait quelque chose comme ceci:

<img src="thumb.png" class="item_roll" /> 

Sans appeler une fonction de la balise img, comment puis-je envoyer l'appel JS au-dessus de l'ID de la base de données? J'espère que cela à du sens.

Merci.

Answer 1

Je recommande d'avoir à la fois une classe et un id dans la balise d'image:

<img src="thumb.png" id="id_28436379" class="item_roll" /> 

Ensuite, dans votre événement jQuery, vous pouvez accéder à cette façon:

$(".item_roll").mouseover(function(event){ 
    alert(event.target.id.split("_")[1]); // displays 28436379 
}); 

Cela devrait vous permettre d'accéder l'identifiant de la base de données en en faisant l'identifiant de l'étiquette d'image.

EDIT: Après avoir lu quelques commentaires utiles, j'ai changé ma réponse pour que l'id ne commence pas par un entier, car ce n'est pas standard et peut ne pas fonctionner dans tous les navigateurs. Comme vous pouvez le voir, le code split/[] extrait le numéro d'identification de la chaîne d'identification.