jQuery tooltip + ajax Inhalt

Question

Ich versuche, eine einfache Rollover-Tooltip für Bilder auf einer Seite zu implementieren, wo Sie beim Überrollen eines Bildes ein kleines Tooltip-Fenster erhalten und den Inhalt von einer Datenbank über AJAX geladen werden.

Ich kann das schnell zusammen hacken, aber ich wollte eine elegante Art und Weise, dies zu tun, ohne Verwendung von Inline-JS.

Also meine Frage ist: Wenn ich das Rollover-Ereignis in meiner externen .js-Datei erfassen, wie übertrage ich es die Datenbank-ID?

Ich bin mit jQuery so würde ich so etwas tun:

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

und mein HTML wäre so etwas wie dieses:

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

Ohne eine Funktion aus dem img-Tag aufrufen, wie sende ich den JS-Aufruf über die Datenbank-ID? Ich hoffe das ergibt Sinn.

Danke.

Answer 1

Ich empfehle beide eine Klasse und eine ID in der Image-Tag mit:

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

Dann in Ihrem jQuery Ereignis, können Sie das so wie Zugang:

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

Dies sollten Sie den Zugriff lassen die Datenbank-ID, indem Sie sie zur ID des Image-Tags machen.

EDIT: Nachdem ich einige hilfreiche Kommentare gelesen habe, habe ich meine Antwort so geändert, dass die ID nicht mit einer Ganzzahl beginnt, da dies nicht standardisiert ist und nicht in allen Browsern funktioniert. Wie Sie sehen können, extrahiert der Split/[] Code die ID-Nummer aus der ID-Zeichenfolge.