Jquery Loop não está funcionando corretamente?

Estou tentando criar um loop para criar muitas funções, de modo que, quando um usuário clica no botão acima, ele executa o documento .php correto. Isso funciona muito bem quando retiro o loop e apenas forneço um número específico de var ia, mas, assim que eu tentar fazer um loop, no alerta (i) eu recebo 10 no primeiro loop.

var i=1; while ( ++i < 10 ) { $('#thumbup' + i).click(function() { var userid = $('#theuser' + i).text(); var url = "_thumbup.php?userid=" + userid; //alert(url); $('#thumbup' + i).hide(); $('#thumbdown' + i).hide(); $("#toggle").css("display","block"); alert(i); // Give me 10 on first loop?!? // get the URL http = new XMLHttpRequest(); http.open("GET", url, true); http.send(null); // prevent form from submitting return false; }); } 

Este é um problema clássico: no momento em que seus callbacks são chamados, i tenho o valor do fim do loop.

Veja como você pode corrigi-lo:

 var i=1; while ( ++i < 10 ) { (function(i){ // your current code })(i); } 

Isso funciona porque a function interna cria um escopo quando é chamado e esse escopo contém o valor de i você deseja.

Você deve passar o valor de i em seu retorno de chamada. Tente isso:

 var i=1; while ( ++i < 10 ) { (function(i){ $('#thumbup' + i).click(function() { var userid = $('#theuser' + i).text(); var url = "_thumbup.php?userid=" + userid; //alert(url); $('#thumbup' + i).hide(); $('#thumbdown' + i).hide(); $("#toggle").css("display","block"); alert(i); // Give me 10 on first loop?!? // get the URL http = new XMLHttpRequest(); http.open("GET", url, true); http.send(null); // prevent form from submitting return false; }); })(i); }