onClick evento in un ciclo For

Question

Ho provato a creare un ciclo con un for e un incremento di un evento onclick, ma non funziona.

Una parte di js:

var gameCase = ['', '', '', '', '', '', '', '', ''], // 9 
    itemLists = $('game').getElementsByTagName('li'); // 9 items 

    for(var i = 0; i < itemLists.length; i++) { 
     // i already egal to 9 
     itemLists[i].onclick = function() { 
       // do something 
     } 
    } 

Ma in questo caso, il ciclo For è già finito prima ero in grado di fare clic su un elemento della lista.

Inoltre, vorrei ottenere l'elenco di elementi su cui ho fatto clic e salvarlo su un array. Ho provato un gameCase [questo] (nella funzione onclick), ma non so se è il modo giusto.

Answer 1

John Resig tratta questo argomento molto bene in "Secrets of the Ninja JavaScript" (http://ejohn.org/apps/learn/#59)

Avrai bisogno di creare un ambito temporaneo per preservare il valore dei

for (var i = 0; i < itemLists.length; i++) (function(i){ 
    itemLists[i].onclick = function() { 
     // do something 
    } 
})(i); 

Edit:

var gameCase = ['', '', '', '', '', '', '', '', ''], // 9 
$listParent = $('game').find('ul'), // li's parent 
itemLists = $('game').getElementsByTagName('li'); // 9 items 

var listHandler = (function() { 
    var i = 0; 

    return function() { 
    // $(this) will in here refer to the clicked li 
    i++ // increment i 

    if (i === 9) { 
     $listParent.off('click', 'li', listHandler); //remove eventhandler when i reaches 9 
    } 
    } 
}()); 

$listParent.on('click', 'li', listHandler); // attach eventhandler to ul element 

Questo dovrebbe fare quello che vuoi, non posso provarlo subito visto che sono al lavoro.

Answer 2

avvolgere il vostro ascoltatore:

onclick = (function(i) {return function() { 
    ... 
};})(i); 

Questo risolve i vostri problemi di portata variabile.

Answer 3

Scusa se non ho capito correttamente la tua domanda, Dal codice capisco che stai provando ad aggiungere un gestore onclick a tutti gli elementi della lista trovati nel tag del gioco (forse dovrebbe essere una classe/id).

Il ciclo for verrà eseguito quando il tag/file script viene caricato senza alcuna interazione dell'utente.

Se si desidera assegnare una funzione che utilizza il valore corrente del contatore. Utilizzare il seguente codice:

itemLists[i].onclick = (function() { 
    return function() { 
     // TODO --- 
     // Your handler code here 
} 
})();