Molto spesso capita di avere l’esigenza di recuperare l’id di un div o elemento cliccato da usare in jQuery per animazioni, callback e molto altro. Vediamo come fare in qusto semplice ma (sono sicuro) utilissimo articolo.
Veniamo subito al dunque, abbiamo una struttura html di questo tipo:
<a class="testo" id="1">Blabla 1</a> <a class="testo" id="2">Blabla 2</a>
Vogliamo sapere che id è stato cliccato. Ovviamente al posto dei link come in questo caso potete inserire div, elementi, immagini e tutto ciò che vi serve.
Ecco come procedere (codice commentato):
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
//quando clicco sul testo (trigger)
$('.testo').click(function(){
//imposto una variabile e ci associo l'attributo id del trigger
//che ho cliccato (in questo caso .testo)
var recupero_id = $(this).attr("id");
//da qui in poi potete usare l'id recuperato per fare qualcosa
//in questo caso faccio apparire un alert con dentro l'id recuperato.
alert(recupero_id);
}); //fine click function
}); //fine DOM
</script>
Vi invito alla lettura dei commenti al codice per capire meglio il funzionamento “passo-passo”, in ogni caso il procedimento è abbastanza semplice, uso la funzione .attr() per recuperare l’attributo id dell’elemento cliccato, mettendo il risultato in una variabile possiamo usare questo valore in ogni momento senza problemi. Come già detto, oltre ai link, come trigger potete usare anche altri elementi come div o immagini, il procedimento non cambia!
In questo esempio, molto banale ma esplicativo, una volta recuperato l’id faccio apparire un alert con all’interno l’id recuperato, ma ovviamente possiamo pensare di usare questo valore in termini “più ampi” come ad esempio ciclare animazioni, e molto altro!
Spero vi sia utile, a domani!
molto utile! grazie!!!
Ci sono errori JS nella pagina, risolvete.
Ciao. È possibile usare il nome dell’ID recuperato (senza #) all’interno di una funzione (scrollTop nel mio caso)?
Il caso è questo: un nav con id associati ad ogni voce e nel body section con gli stessi nomi, solo come classi (#voce1 – id dell’elemento nel nav -, .voce1 – classe della section nel body)
$(“nav ul li a”).click(function(event) {
/* Act on the event */
var nomeVariabile = $(this).attr(“id”);
$(‘html,body’).animate({
scrollTop: $(“.(nomeVariabile)”).offset().top});
});
Spero di essere stato chiaro e grazie