[Jquery]Cambio immagine al click

[Iron83]

Ciao a tutti,

ho realizzato un tree per la visualizzazione di categorie infinite, lo show/hide delle categorie è gestito dall'effetto toggle che al click cambia l'immagine della cartella da chiusa ad aperta, di seguito il js.

        <script type="text/javascript">
            function OpenOne(ID) {        
                // run the effect
                $( "."+ID ).toggle(500);
                firstlvlopen = 'first_lvl_open.png';
                $(".img"+ID).attr('src',firstlvlopen)
            };
            $( "."+ID ).click(function() {
                return false;
            });
        </script>
[img]first_lvl.png[/img]" OnClick="OpenOne('<%=arr(rip,0)%>')" border="0"/> <%=arr(rip,1)%> 

In pratica al click valorizzo la funzione "OpenOne" con l'ID della categoria che aziona l'effetto toggle sulla categoria selezionata e cambia l'immagine dalla cartella chiusa alla cartella aperta.

Il mio "problema" sta che una volta cliccato sulla categoria aperta per chiuderla l'immagine non torna all'immagine chiusa.
Ho provato ad inserire una funzione callback inserendo gli stessi parametri del "firstlvlopen"(cambiando nome in firstlvlclosed) e cambiando immagine ma senza risultati.

Potete aiutarmi? spero di essere stato chiaro

[simo_JQ]

Spero che io abbia capito bene cosa vuoi fare...

allora prima cosa eliminiamo quell'onclick che io odio, a Jquery non serve, può trovare dove applicare le funzioni solo utilizzando i selettori quindi:

VIA onclick... poi puoi anche lasciarlo ma a me pare inutile, poi cambiamo l'attrbuto class in img_chage e mettiamo img_tuoID generato in automatico da ASP (credo) come ID perché credo ne crei uno univoco se non è così non mettiamolo e bom.

Ecco lo script:

<script type="text/javascript">
$(function(){
		  $(".img_change").toggle(function(){	
										    firstlvlopen = 'first_lvl_open.png';
											$(this).attr('src',firstlvlopen);
											}, function(){
												var first_lvl = "first_lvl.png";
												$(this).attr('src',first_lvl);
											});
	});
</script>

ecco la formattazione della tua immagine:

[img]first_lvl.png[/img]" class="img_change" border="0"/>

Se per caso non fosse first_lvl.png src della prima immagine al ready del documento piazziamo l'src di tutte le nostre immagini da cambiare nel loro attr TITLE o NAME così poi potremo recuperarlo quando andiamo a fare il callback per tornare all'immagne in origine.

spero che sia quello che vuoi nel caso, POSTA.

Ciaoo

[Iron83]

Ciao Simo,

intanto grazie mille per la risposta.

Il codice come l'hai postato tu funziona, nel senso che al click cambia icona ed è quello che volevo succedesse, il problema è che non mi apre le categorie.

Il fatto è che io valorizzo dinamicamente la classe, poi tramite on click passo l'ID della categoria che mi appresto ad aprire:

[img]first_lvl.png[/img]')"  border="0"/> <%=arr(rip,1)%> 

so che Jquery funziona con gli attributi, ma dal momento in cui io non so come si chiamerà l'attributo visto che è dinamico (es. class="img<%=arr(rip,0)%>") come posso aprire così la categoria scelta? se lasciassi class="img" lui mi aprirebbe tutte le categorie con class "img" in un click solo....

Spero di essermi spiegato bene

[simo_JQ]

ok,
allora puoi lasciare la class come la definisci tu.

per far andare bene il mio script e il tuo modo di definire la class devi sostituire:

$(".img_change")

con

$('.img_change[class^="img"]')

così facendo Jquery selezionerà tutti gli oggetti con class che comincia con img (al di la di come lo definiscitu).

LATI NEGATIVI: lui selezionerà qualunque elmento con class = "img...", quindi puoi filtrare ancora di + la selezione mettendo:

$('TUO ID').find('.img_change[class^="img"]')

al posto di TUO ID metti l'id o la classe dell'elemento che contiene quelle immagini in modo da selezionare solo quelle.