Ciao, non serve usare degli id in questo caso, anzi è più comodo usare delle classi così come già fa quello script. In teoria dovrai quindi usare dei metodi che agiscono in modo relativo tra i vari elementi, cioè ad esempio ogni tooltip dovrà in qualche modo essere riconducibile al proprio elemento immagine. Sostanzialmente dovrai studiarti come strutturare la relazione tra i vari elementi in gioco. In pratica ogni elemento a.mostra deve poter "selezionare" il proprio elemento .tooltip per poterlo aprire correttamente.
Un sistema potrebbe essere quello di assegnare una certa sequenza tra i vari elementi. Supponendo, ad esempio, di stabilire che l'elemento div.tooltip sia posto sempre a seguire l'elemento a.mostra, puoi quindi identificare il tooltip, relativo all'elemento .mostra cliccato, attraverso un qualsiasi metodo che "selezioni" l'elemento .tooltip appena successivo all'elemento stesso su cui si è cliccato.
Analogamente, per il pulsante .chiudi puoi usare un metodo che selezioni l'elemento genitore del pulsante stesso che è stato cliccato.
Non è semplice spiegarlo ma è importante capire il concetto di "selezionare" (e quindi identificare) un elemento in base ad un riferimento relativo, a partire da un elemento che ne determina il contesto.
Ora, nel tuo esempio potresti adoperare il selettore jQuery in questo modo:
codice:
$('+.tooltip',this)
inserito dentro la funzione di gestione del click per poter selezionare il tooltip relativo all'immagine stessa. La parola chiave this identifica infatti l'elemento stesso "a.mostra" per il quale è definito l'evento click, ed è usato in questo caso come contesto del selettore stesso. La stringa "+.tooltip" rappresenta infatti un selettore (esattamente come per il CSS) dove il segno "+" indica di selezionare il "fratello prossimo" che segue l'elemento dichiarato come contesto (il this).
Questo metodo quindi restituisce sostanzialmente l'elemento .tooltip successivo all'elemento .mostra cliccato.
Per il pulsante .chiudi invece puoi usare il metodo parent() (jQuery) in modo da selezionare l'elemento genitore dell'elemento cliccato (cioè del pulsante), in un modo del genere:
.
Lo script potrebbe quindi essere rielaborato in questo modo:
codice:
$(document).ready(function () {
$('.tooltip').fadeOut(0);
$('button.chiudi').click(function (e) {
e.preventDefault();
$(this).parent().fadeOut();
});
$('a.mostra').click(function (e) {
e.preventDefault();
$('+.tooltip',this).fadeIn();
});
});
.
Chiaramente la cosa può essere risolta in svariati altri modi.