ciao,
tieni sempre a portata di mano la
documentazione di jQuery, ti aiuta ad evitare errori.
Inoltre, se sviluppi con Visual Studio, hai anche a disposizione l'intellisense che ti mostra i metodi che puoi usare.
Procediamo con ordine. Tu vuoi selezionare degli elementi (bottoni) che portano una certa classe.
Quello che hai scritto è corretto, hai giustamente usato il selettore delle classi.
Guardando nella
documentazione, si scopre che quell'espressione restituisce un oggetto chiamato "jQuery", che
non è il tipico array javascript, come si potrebbe pensare, ma è molto più ricco e dispone di tanti metodi, che puoi trovare elencati qui:
http://api.jquery.com/Tra quelli, trovi il metodo .click() che ha la particolarità di operare su
ciascuno degli elementi trovati dal tuo selettore. Da qui ne consegue che non devi più fare un ciclo for. E' il metodo .click che lo fa per te.
La sintassi, quindi, diventa molto concisa.
$('.tblButton').click(function(){ /*qui codice da eseguire al click */ });
Adesso portiamolo nel tuo contesto: al click tu devi invocare la funzione
ciao passandole un parametro. Molto semplicemente, puoi fare così:
function prova(atxt) {
$('.tblButton').click(function(){
//chiamo la funzione
ciao(atxt);
});
}
function ciao(txt){alert('ciao' + txt);};
Ora funziona e potremmo fermarci qui, ma portiamo la tua funzione
ciao in un ambito un po' più ristretto, dato che ora è dichiarata globalmente.
Se si tratta di una sola funzione non c'è problema, ma avere moltissime funzioni e variabili globali causerà
problemi di performance alla tua applicazione.
Quindi, sposta la dichiarazione di
ciao all'interno dell'altra funzione
prova
function prova(atxt) {
//dichiaro ciao all'interno della function prova
//questo le da un ambito più ristretto di quello globale
function ciao(txt){ alert('ciao' + txt); };
$('.tblButton').click(function(){ ciao(atxt); });
}
Volendo fare un'ulteriore ottimizzazione, puoi liberarti di quella function(){...} che viene creata al solo scopo di invocare
ciao con un parametro.
Guardando la
documentazione, si scopre che il metodo click già consente il passaggio di parametri alla funzione. Quindi:
function prova(atxt) {
//definisco la funzione localmente.
//Dovrò usare txt.data per accedere al valore passato perché
//txt ora è diventato un eventObject
function ciao(txt){ alert('ciao' + txt.data); };
//il primo parametro è il valore di atxt. Il secondo è il riferimento alla funzione
$('.tblButton').click(atxt, ciao);
}
ciao
Modificato da BrightSoul il 14 dicembre 2012 21.25 -
