[jQuery] funzione che agisce su selezione vecchia

[Andreau]

Salve. Ho una funzione che agisce su una selezione (passata tramite l'argomento 'selezione'): in pratica, quando passo col mouse sugli elementi della selezione, un altro elemento in essa contenuto ('.extLink') viene animato tramite hover.
La funzione è:

	
function animo(selezione) { 
	selezione.hover( 		
		function () { 		
			$('.extLink').stop().animate({right: '-5px'}, 'fast'); 		
		},  		
		function () { 		
			$('.extLink').stop().animate({right: '0'}, 'fast'); 		
		} 		
	); 	
}

La selezione cambia cliccando su alcuni elementi della pagina. Accade però che, nonostante cambi la selezione, la funzione continua ad agire anche sugli elementi che facevano parte delle selezioni precedenti, ovvero .extLink viene animato anche quando passo su questi elementi.
Ho verificato tramite alcuni test che la selezione avviene in maniera corretta. Quale potrebbe essere perciò la causa di questo comportamento?
Grazie

[KillerWorm]

Ciao,
dallo script e da ciò che descrivi non è chiaro quando e in che modo vai a richiamare la funzione "animo".
Inoltre non è chiaro se la classe extLink sia già applicata in modo statico a tutti i vari elementi da animare. In tal caso può essere normale che l'animazione sia eseguita su tutti gli elementi con classe extLink, semplicemente perché il selettore $('.extLink') ricerca tutti gli elementi con tale classe, a prescindere dalle eventuali selezioni che vai a fare cliccando su un qualsivoglia elemento.

Andando ad intuito ti direi che dovresti specificare il contesto per il selettore, in questo modo:

selezione.hover( 		
	function () { 		
		$('.extLink', this).stop().animate({right: '-5px'}, 'fast'); 		
	},  		
	function () { 		
		$('.extLink', this).stop().animate({right: '0'}, 'fast'); 		
	} 		
);

Il problema che descrivi può infatti dipendere da questo, dato che fai capire di voler animare solo l'elemento, con la classe suddetta, che sia però contenuto nell'elemento selezionato.
In questo caso il "this" restringe la ricerca sull'elemento in questione.

Se non risolvi così, prova a chiarire meglio la dinamica del tuo script.

[Andreau]

Grazie KillerWorm, ho provato ad aggiungere quanto suggerisci, ma questo fa sì che .extLink venga animato solo quando vado su di esso. In realtà voglio che venga animato quando vado su altri elementi, uno dei quali contiene .extLink.
Cerco di spiegare meglio prima di mettere tutto lo script che è un po' lungo:
- ho vari elementi di un elenco puntato;
- cliccando su certi elementi altrove nella pagina, viene assegnata una classe ('attivo') ad alcuni elementi dell'elenco e tolta agli altri a cui precedentemente era stata assegnata: in altre parole, faccio spostare la classe 'attivo' tra gli elementi dell'elenco;
- dentro il primo li.attivo inserisco l'elemento a.extLink (un pulsante) e al tempo stesso rimuovo a.extLink precedentemente creato: nella pagina ce n'è quindi sempre uno solo;
- alla funzione animo() passo li.attivo come selezione, quindi quando vado col mouse sugli elementi li.attivo viene animato .extLink.[/list]

Il problema è che è come se si ricordi quali elementi erano stati prima attivati, cioè quali prima avevano la classe 'attivo': .extLink viene animato passando non solo sugli elementi che in quel momento hanno questa classe, ma anche su quelli che l'avevano precedentemente.
Non riesco a trovare il bandolo, ho fatto diverse prove, tutto sembra funzionare correttamente (aggiunta/cancellazione della classe 'attivo' e di .extLink...) e ho verificato che la selezione passata a animo() sia corretta. E' possibile che la funzione "memorizzi" le selezioni precedenti??

[KillerWorm]

ma questo fa sì che .extLink venga animato solo quando vado su di esso. In realtà voglio che venga animato quando vado su altri elementi, uno dei quali contiene .extLink.

Confermo che non mi era chiaro ciò che volessi fare.
Ora hai dato qualche descrizione in più anche se non riesco ad inquadrare ancora bene il tutto.

E' possibile che la funzione "memorizzi" le selezioni precedenti??

In un certo senso sì. Non tanto la funzione "animo" ma il metodo hover, al momento in cui è applicato ad un elemento, fa in modo di (diciamo pure) "memorizzare" (o gergalmente, "bindare"), per quell'elemento, i due handler che gestiscono gli eventi mouseenter e mouseleave.

http://api.jquery.com/hover/

Questi handler restano "attivi" fintanto che non vengano rimossi (unbind) dall'elemento stesso. Da quanto hai descritto si presume che tu stia semplicemente rimuovendo la classe "attivo" dagli elementi che vuoi disattivare (non hai indicato in che modo fai questo), ma stai lasciando applicati gli handler che restano quindi sempre in funzione. Per questo motivo, dal momento in cui applichi il metodo hover, tali elementi restano praticamente sempre attivi.

Il problema potrebbe quindi dipendere da questo. Puoi risolvere in diversi modi. Una soluzione potrebbe essere quella di rimuovere semplicemente gli handler dagli elementi che vuoi disattivare, così come si presume che tu faccia per rimuovere la classe "attivo" (che di per se non rimuove gli handler).

Per rimuovere gli handler puoi usare il metodo unbind(). Tenendo conto che il metodo hover è una scorciatoia per .mouseenter().mouseleave() puoi rimuovere questi handler, dagli elementi che vuoi disattivare, con .unbind('mouseenter mouseleave').

Spero tu riesca a risolvere.

[Andreau]

Ottimo! Ho aggiunto .unbind('mouseenter mouseleave') e adesso funziona!
Non sapevo che l'handler dell'evento hover rimanesse attivo, ho imparato quindi una cosa nuova.

.unbind('mouseenter mouseleave') l'ho aggiunto dove tolgo la classe 'attivo' agli elementi che l'avevano:

$('.attivo').removeClass('attivo').unbind('mouseenter mouseleave');

Grazie mille! Alla prossima