Problema sostituzione immagini jQuery

[marf]

Salve a tutti, da poco ho iniziato ad utilizzare il framework jQuery, ma sto già trovando alcune difficoltà nella realizzazione di uno script.


Alla registrazione del mio gioco ho fatto in modo che un utente può scegliere la propria fazione cliccando sulla immagine della fazione corrispondente, questa verrà sostituita da una immagine simile ma con il bordo colorato in modo che si capisca che quella è la fazione che ha selezionato.

Ora il problema è il seguente: se un utente si sbaglia e clicca su una fazione poi ne clicca su un altra ancora entrambe le immagini delle fazioni appariranno come selezionate!

Utilizzo la seguente funzione per cambiare l'img della fazione:

$.extend({
	changeFactionImage :	function (id){
	
	$("#"+id).attr("src","../img/factions/"+id+"H.png"); // fornisce il suffisso H per indicare l'immagine hover; es. francesi.png = img normale -> francesiH.png = img hover
		
}	
});

Essa viene richiamata dalla pagina in questo modo:

[img]../img/factions/francesi.png[/img]             
[img]../img/factions/spagna.png[/img]             
[img]../img/factions/milanesi.png[/img]             
[img]../img/factions/venezia.png[/img]             
[img]../img/factions/siciliani.png[/img]             
[img]../img/factions/inglesi.png[/img]             
[img]../img/factions/scozzesi.png[/img]             
[img]../img/factions/tedeschi.png[/img]             
[img]../img/factions/polacchi.png[/img]             
[img]../img/factions/magiari.png[/img]             
[img]../img/factions/egiziani.png[/img]            
[img]../img/factions/turchi.png[/img]

Questo viene fatto per ogni fazione... Qualcuno conosce il modo di fare sì, modifcando la funzione che cambia l'immagine, di far sì che se si clicca su un'altra immagine di fazione se prima ve ne è stata cliccata un altra essa torni al suo stato normale?


Grazie in anticipo,


Marco

[Vindav]

Ci sono svariate soluzioni e anche abbastanza semplici da implementare, te ne descrivo alcune, le prime che mi vengono in mente:

- ti basta avere qualcosa che accomuni tutte le immagini delle fazioni. Fatto questo potresti recuperare facilmente tutte i tag immagini e farti un ciclo impostando l'attributo src con le immagini di default(senza bordi) fatta eccezione per l'elemento che ha come id quello ricevuto in input dalla funzione.

- puoi salvarti in qualche variabile l'oggetto corrispondente all'immagine selezionata. Quando l'utente ne selezionerà un altra recuperi detto oggetto e ne imposti l'immagine di default salvandoti nella variabile la nuova immagine selezionata e cosi via.

- imposti la proprietà class all'immagine selezionata. Quando l'utente ne selezionerà un altra, recuperando questo class ti sarà molto semplice identificare l'immagine selezionata precedentemente e impostargli l'immagine di default. Poi ti basta rimuovere il class all'immagine precedente e impostarlo alla nuova immagine selezionata.

Per la prima e la terza soluzione devi effettuare delle modifiche alla parte html, tra le due pero ti suggerisco la terza, su cui non devi effettuare nessun ciclo che potrebbe appesantire lo script se le immagini sono molte. Se non vuoi effettuare modifiche alla parte html allora potresti prendere in considerazione la seconda soluzione.

[marf]

Ho risolto assegnandogli una classe!

Grazie mille per l'aiuto