jQuery tooltip + contenuto Ajax

Question

Sto tentando di implementare un semplice suggerimento di rollover per le immagini su una pagina in cui quando si scorre un'immagine, si ottiene una piccola finestra di descrizione e il contenuto viene caricato da un database tramite AJAX.

Posso hackerarlo insieme rapidamente ma volevo un modo elegante per farlo senza utilizzare alcun JS in linea.

Quindi la mia domanda è: se catturo l'evento di rollover nel mio file .js esterno, come faccio a passare l'ID del database?

sto usando jQuery quindi vorrei fare qualcosa di simile:

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

e il mio HTML sarebbe qualcosa di simile:

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

Senza rimettere in funzione dal tag img, come faccio a inviare la chiamata JS sopra l'ID del database? Spero che abbia un senso.

Grazie.

Answer 1

Mi consiglia di avere sia una classe e un id nel tag immagine:

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

Poi, nel vostro evento jQuery, è possibile accedere a tale in questo modo:

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

Questo dovrebbe permettere di accesso l'ID del database rendendolo l'id del tag immagine.

MODIFICA: dopo aver letto alcuni commenti utili, ho modificato la risposta in modo che l'ID non inizi con un numero intero, poiché non è standard e potrebbe non funzionare in tutti i browser. Come puoi vedere, il codice split/[] estrae il numero id dalla stringa id.