[bruzzanboy]

Ciao ragazzi,
in attesa di iniziare a studiare i linguaggi di scripting facendo un bel corso, mi sto' mettendo un po' a smanettare.

Ho realizzato qualche pissola funzione un po' "statica" e vorrei capire come utilizzare un ciclo per rendere tutto il codice più compatto.

riporto qui un esempio dove all'hover su un determinato elemento se ne accende un altro:
Se faccio hover sull'immagine A si visualizza il Div classe_A e si spengono gli altri, b con classe_b e così via...
Esiste un metodo per non ripetere sempre tutto ma dirgli: "accendi il div che corrisponde alla classe."???

Sento che sapere questa cosa mi farebbe dormire meglio

Sintassi: javascript [ Scarica ] [ Nascondi ]

Sintassi: javascript [ Scarica ] [ Mostra ]

1. $(document).ready(function() {
2.                                                    
3. $(".classe_a").css('display','none');
4. $(".classe_b").css('display','none');
5. $(".classe_c").css('display','none');
6. $(".classe_d").css('display','none');
7.                                                    
8.                                                    
9. $(".prodotti_container .prodotto img.a").hover(function() {
10. $(".classe_a").css('display','block');
11. $(".classe_b").css('display','none');
12. $(".classe_c").css('display','none');
13. $(".classe_d").css('display','none');
14. }, function() {
15. $(".classe_a").css('display','none');
16. });
17.  
18.  
19. $(".prodotti_container .prodotto img.b").hover(function() {
20. $(".classe_a").css('display','none');
21. $(".classe_b").css('display','block');
22. $(".classe_c").css('display','none');
23. $(".classe_d").css('display','none');
24. }, function() {
25. $(".classe_b").css('display','none');
26. });
27.  
28.  
29.  
30. $(".prodotti_container .prodotto img.c").hover(function() {
31. $(".classe_a").css('display','none');
32. $(".classe_b").css('display','none');
33. $(".classe_c").css('display','block');
34. $(".classe_d").css('display','none');
35. }, function() {
36. $(".classe_c").css('display','none');
37. });
38.  
39.  
40. $(".prodotti_container .prodotto img.d").hover(function() {
41. $(".classe_a").css('display','none');
42. $(".classe_b").css('display','none');
43. $(".classe_c").css('display','none');
44. $(".classe_d").css('display','block');
45. }, function() {
46. $(".classe_d").css('display','none');
47. });
48.  
49.  
50. });

[antoscarface]

Molto semplicemete, ti può venire d'aiuto usare delle classi più generiche, da applicare agli elementi da far mostrare/nascondere (che come esempio adesso chiamo 'classe_div').

Più o meno, è questa l'ottimizzazione del codice che hai postato:

Sintassi: javascript [ Scarica ] [ Nascondi ]

Sintassi: javascript [ Scarica ] [ Mostra ]

1. $(document).ready(function() {
2. $('.classe_div').css(display, 'none');
3.  
4. $('.prodotti_container .prodotto img').hover(
5.     function()
6.     {
7.         $('.classe_div').css(display, 'none');
8.         $('.' + $(this).attr('class') ).css(display, 'block');
9.     },
10.     function()
11.     {
12.         $('.' + $(this).attr('class') ).css(display, 'none');
13.     }
14. )
15. }
16.  

Più o meno così dovrebbe funzionare e soprattutto lo stesso effetto lo ottieni sull'hover di un numero infinito di img.

[bruzzanboy]

Grazie per la dritta, provo a metterla in pratica quanto prima

[bruzzanboy]

Grazie Anton, la tua risposta mi è stata molto utile per un nuovo progetto simile al precedente