Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][PHP]Problem z klasami
Forum PHP.pl > Forum > Przedszkole
Poczatkujacy_Web
Mam kod, który nadaje klase do elementów:

  1. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  2. <script type="text/javascript">
  3. jQuery(document).ready(function() {
  4. jQuery("#lazienka").on('click', function(){ $(n).addClass('podswietl');});
  5. jQuery("#lazienka").on('click', function(){ $(n1).addClass('podswietl');});
  6. jQuery("#lazienka").on('click', function(){ $(n2).addClass('podswietl');});
  7. jQuery("#lazienka").on('click', function(){ $(n3).addClass('podswietl');});
  8. jQuery("#lazienka").on('click', function(){ $(ee).addClass('podswietl');});
  9. jQuery("#lazienka").on('click', function(){ $(dd).addClass('podswietl');});
  10. jQuery("#lazienka").on('click', function(){ $(aa).addClass('podswietl');});
  11.  
  12. jQuery("#parking").on('click', function(){ $(o).addClass('podswietl');});
  13. jQuery("#parking").on('click', function(){ $(p).addClass('podswietl');});
  14. jQuery("#parking").on('click', function(){ $(q).addClass('podswietl');});
  15. jQuery("#parking").on('click', function(){ $(r).addClass('podswietl');});
  16. jQuery("#parking").on('click', function(){ $(s).addClass('podswietl');});
  17. jQuery("#parking").on('click', function(){ $(t).addClass('podswietl');});
  18. jQuery("#parking").on('click', function(){ $(v).addClass('podswietl');});
  19. jQuery("#parking").on('click', function(){ $(w).addClass('podswietl');});
  20. jQuery("#parking").on('click', function(){ $(x).addClass('podswietl');});
  21. jQuery("#parking").on('click', function(){ $(na).addClass('podswietl');});
  22. jQuery("#parking").on('click', function(){ $(nb).addClass('podswietl');});
  23.  
  24. jQuery("#basen").on('click', function(){ $(d).addClass('podswietl');});
  25. jQuery("#basen").on('click', function(){ $(f).addClass('podswietl');});
  26. jQuery("#basen").on('click', function(){ $(i).addClass('podswietl');});
  27.  
  28. jQuery("#ogrod").on('click', function(){ $(a).addClass('podswietl');});
  29. jQuery("#ogrod").on('click', function(){ $(b).addClass('podswietl');});
  30. jQuery("#ogrod").on('click', function(){ $(c).addClass('podswietl');});
  31. jQuery("#ogrod").on('click', function(){ $(d).addClass('podswietl');});
  32. jQuery("#ogrod").on('click', function(){ $(e).addClass('podswietl');});
  33. jQuery("#ogrod").on('click', function(){ $(f).addClass('podswietl');});
  34. jQuery("#ogrod").on('click', function(){ $(g).addClass('podswietl');});
  35. jQuery("#ogrod").on('click', function(){ $(h).addClass('podswietl');});
  36. jQuery("#ogrod").on('click', function(){ $(i).addClass('podswietl');});
  37. jQuery("#ogrod").on('click', function(){ $(j).addClass('podswietl');});
  38. jQuery("#ogrod").on('click', function(){ $(ne).addClass('podswietl');});
  39. jQuery("#ogrod").on('click', function(){ $(l).addClass('podswietl');});
  40. jQuery("#ogrod").on('click', function(){ $(o).addClass('podswietl');});
  41. jQuery("#ogrod").on('click', function(){ $(p).addClass('podswietl');});
  42. jQuery("#ogrod").on('click', function(){ $(q).addClass('podswietl');});
  43. jQuery("#ogrod").on('click', function(){ $(r).addClass('podswietl');});
  44. jQuery("#ogrod").on('click', function(){ $(s).addClass('podswietl');});
  45. jQuery("#ogrod").on('click', function(){ $(cc).addClass('podswietl');});
  46. jQuery("#ogrod").on('click', function(){ $(y).addClass('podswietl');});
  47. jQuery("#ogrod").on('click', function(){ $(z).addClass('podswietl');});
  48.  
  49. jQuery("#tarasy").on('click', function(){ $(v).addClass('podswietl');});
  50. jQuery("#tarasy").on('click', function(){ $(w).addClass('podswietl');});
  51. jQuery("#tarasy").on('click', function(){ $(x).addClass('podswietl');});
  52. jQuery("#tarasy").on('click', function(){ $(nc).addClass('podswietl');});
  53. jQuery("#tarasy").on('click', function(){ $(nd).addClass('podswietl');});
  54. jQuery("#tarasy").on('click', function(){ $(na).addClass('podswietl');});
  55. jQuery("#tarasy").on('click', function(){ $(nb).addClass('podswietl');});
  56. jQuery("#tarasy").on('click', function(){ $(i).addClass('podswietl');});
  57. jQuery("#tarasy").on('click', function(){ $(j).addClass('podswietl');});
  58. jQuery("#tarasy").on('click', function(){ $(d).addClass('podswietl');});
  59. jQuery("#tarasy").on('click', function(){ $(c).addClass('podswietl');});
  60.  
  61. jQuery("#elewacje").on('click', function(){ $(ee).addClass('podswietl');});
  62. jQuery("#elewacje").on('click', function(){ $(k).addClass('podswietl');});
  63. jQuery("#elewacje").on('click', function(){ $(b).addClass('podswietl');});
  64. jQuery("#elewacje").on('click', function(){ $(c).addClass('podswietl');});
  65. jQuery("#elewacje").on('click', function(){ $(f).addClass('podswietl');});
  66. jQuery("#elewacje").on('click', function(){ $(n1).addClass('podswietl');});
  67. jQuery("#elewacje").on('click', function(){ $(n2).addClass('podswietl');});
  68. jQuery("#elewacje").on('click', function(){ $(n3).addClass('podswietl');});
  69.  
  70. jQuery("#komunikacja").on('click', function(){ $(b).addClass('podswietl');});
  71. jQuery("#komunikacja").on('click', function(){ $(g).addClass('podswietl');});
  72. jQuery("#komunikacja").on('click', function(){ $(v).addClass('podswietl');});
  73. jQuery("#komunikacja").on('click', function(){ $(j).addClass('podswietl');});
  74. jQuery("#komunikacja").on('click', function(){ $(ee).addClass('podswietl');});
  75. jQuery("#komunikacja").on('click', function(){ $(n1).addClass('podswietl');});
  76. jQuery("#komunikacja").on('click', function(){ $(n2).addClass('podswietl');});
  77. jQuery("#komunikacja").on('click', function(){ $(n3).addClass('podswietl');});
  78. jQuery("#komunikacja").on('click', function(){ $(n).addClass('podswietl');});
  79.  
  80. });
  81. </script>


i problem że kliedy klikam w inny element to nie resetuje tego od zera. Chciałbym aby po kliknięciu w lazienka podswietlily sie elementy, a po kliknieciu w np. komunikacja zresetowaly sie elementy z lazienki i podswietlily te z komunikacji. Bardzo prosze o pomoc.
Sephirus
O rany sporo tego kodu ;P

W każdej funkcji on "click" daj jeszcze:

[JAVASCRIPT] pobierz, plaintext
  1. $('.podswietl').removeClass('podswietl');
[JAVASCRIPT] pobierz, plaintext



EDIT: ale ogólnie inaczej bym z tym pokombinował bo strasznie duzo kodu to generuje.
Poczatkujacy_Web
Efekt jest taki ze nic sie nie podswietla. Mozesz pokazac na przykladzie jak to powinno wygladac tak aby dzialalo tak jak chce?
Sephirus
Ok racja bo w sumie jak to się wywoła jedno po drugim to tak może byc... musisz zmienić schemat działania już Ci to rozpisuje ogólnie

EDIT:

Dla każdego z guzików przekształć kod w taki sposób jak dla przykładowej "łazienki":

[JAVASCRIPT] pobierz, plaintext
  1. jQuery("#lazienka").on('click', function(){
  2. jQuery(".podswietl").removeClass("podswietl");
  3. var elements = [n1,n2,n3,ee,dd,aa];
  4. for(key in elements)
  5. jQuery(elements[key]).addClass('podswietl');
  6. });
[JAVASCRIPT] pobierz, plaintext


Powinno śmigać

EDIT 2:

Można to jeszcze bardziej skrócić:

[JAVASCRIPT] pobierz, plaintext
  1. function podswietl(elements) {
  2. jQuery(".podswietl").removeClass("podswietl");
  3. for(key in elements)
  4. $(elements[key]).addClass('podswietl');
  5. }
  6.  
  7. jQuery("#lazienka").on('click', function(){
  8. podswietl([n1,n2,n3,ee,dd,aa]);
  9. });
  10.  
  11. jQuery("#basen").on('click', function(){
  12. podswietl([d,f,i]);
  13. });
  14.  
  15. // itd...
[JAVASCRIPT] pobierz, plaintext
Poczatkujacy_Web
Działa jak powinno smile.gif Super. Wielki dzięki
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.