2010-10-14 5 views
32

Ho fatto qualche ricerca in giro per la documentazione, e ho trascorso un po 'di tempo in rete ma non riesco a trovare una soluzione a questo! Voglio che l'avviso mi dica quale iterazione di ciascuna() era attiva quando si fa clic sul .thumb.Jquery ciascuno() Contatore

EG: Ce ne sono sei .thumb clicco sul numero 3, il browser si apre 3!

Ciò che effettivamente accade è indipendentemente dal quale si fa clic su .thumb, 6 si apre.

var counter = 1; 
$('.thumb').each(function() { 
    $(this).click(function() { 
     alert (counter); 
    }); 
    counter++; 
}); 

Qualsiasi aiuto è stato ricevuto con gratitudine.

risposta

59

Questo perché si condivide la stessa variabile counter per tutticlick gestori ed è tutto ciò che finisce per essere alla fine del ciclo. Invece, utilizzare quello passato in loop (il parametro indice del .each() che è già lì), in questo modo:

$('.thumb').each(function (i) { 
    $(this).click(function() { 
     alert (i+1); //index starts with 0, so add 1 if you want 1 first 
    }); 
}); 

You can test it here.

0

La chiamata function() è una dichiarazione di funzione anonima. Devi capire come funzionano le funzioni LISP (sì, ecmascript is lisp).

Invece di $ ('pollice.') Ciascuna, si dovrebbe usare qualcosa di simile (non testata):.

var list = $('.thumb'); 
for(var i=0; i<list.length; i++) { 
    $(list[i]).click(function(){ 
     alert(i); 
    }); 
} 
+1

Questo non risolve il problema, è molto meno efficiente, ma lo stesso problema di una variabile condivisa, tutti avvertiranno che cosa 'i' era alla fine del ciclo. –

+0

@Nick ha ragione. Ciò produrrebbe lo stesso risultato della domanda. – user113716

+0

Ok, mio ​​male. Non dovrei postare questo senza test. –

0

Per utilizzare una soluzione come @Paulo suggerito, si avrebbe bisogno di farlo in questo modo:

var list = $('.thumb'); 

for(var i=0; i<list.length; i++) { 
    (function(i_local) { 
     list.eq(i).click(function(){ 
      alert(i_local); 
     }); 
    })(i + 1); 
}​ 

... anche se mi piacerebbe use @Nicks .each() solution instead. Molto più pulito