Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ukrywanie warstwy
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
matid
28.12.2004, 14:42:10
Witam, mam następujący problem. Mam taki kod HTML:
[HTML] pobierz, plaintext 
  1. <!--QuoteBegin--><div class='quotetop'><a href="javascript:my_show_div(my_getbyid('spoiler'));">SPOILER</a></div>
  2. <div id="spoiler" class='quotemain' style='display: none'>
  3. </script>
  4. <!--QuoteEBegin-->{content}<!--QuoteEnd--></div><!--QuoteEEnd-->
[HTML] pobierz, plaintext

Ten kod ma za zadanie po kliknięciu na link SPOILER pokazywać warstwę 'spoiler'.
Ale teraz przejdźmy do problemu: Jak zmienić ten kod, aby przy większej ilości powtórzeń tego kodu każdy napis spoiler odpowiadał za odkrywanie tylko tej warstwy, która jest pod nim. Odpada nazywanie poszczególnych warstw w ten sposób: spoiler_1, spoiler_2, bo kod jest wstawiany automatycznie. Jedyna możliwość to robienie tego dynamicznie za pomocą JS, ale nie mam koncepcji jak tego dokonać.
bregovic
28.12.2004, 17:54:07
AFAIK jeśli nie możesz dać warstwom różnych id, to nie przejdzie. Chyba żebyś używając DOM znalazł następny div, i go pokazał - ale to jest już wyższa szkoła myślenia...
Paul
28.12.2004, 18:48:25 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function my_show_div(obj) {
  5. 	obj = document.getElementById(obj);
  6. 	obj.style.display == 'none' ? obj.style.display = '' : obj.style.display = 'none';
  7. }
  8. function my_divs_init(ajdi) {
  9. 	objs = document.getElementsByTagName('div');
  10.  
  11. 	for(i = 0, i2 = 0; i < objs.length; i++) {
  12. 		if(objs[ i ].id == ajdi) {
  13. 			objs[ i ].id = ajdi + i2.toString();
  14. 			i2++;
  15. 		}
  16. 	}
  17.  
  18. 	objs = document.getElementsByTagName('a');
  19. 	for(i = 0, i2 = 0; i < objs.length; i++) {
  20. 		if(unescape(objs[ i ].href) == "javascript: my_show_div('" + ajdi + "');") {
  21. 			objs[ i ].href = "javascript: my_show_div('" + ajdi + i2.toString() + "')";
  22. 			i2++;
  23. 		}
  24. 	}
  25. }
  26. </script>
  27. </head>
  28. <body onload="my_divs_init('spoiler');">
  29.  
  30. <div class='quotetop'>
  31. <a href="javascript: my_show_div('spoiler');">SPOILER</a>
  32. </div>
  33.  
  34. <div id="spoiler"  class='quotemain' style='display: none'>
  35. 1
  36. </div>
  37.  
  38.  
  39. <div class='quotetop'>
  40. <a href="javascript: my_show_div('spoiler');">SPOILER</a>
  41. </div>
  42.  
  43. <div id="spoiler"  class='quotemain' style='display: none'>
  44. 2
  45. </div>
  46.  
  47. <div class='quotetop'>
  48. <a href="javascript: my_show_div('spoiler');">SPOILER</a>
  49. </div>
  50.  
  51. <div id="spoiler"  class='quotemain' style='display: none'>
  52. 3
  53. </div>
  54. </body>
  55. </html>
[HTML] pobierz, plaintext
gaza
30.12.2004, 10:18:43
Bardzo mi sie przydalo to rozwiazanie.
Mam jednak jedno pytanie.

Nie bardzo znam jeszcze JS , a chcialbym w zaleznosci od tego czy ukrywam , czy pokazuje, zmieniac nazwe linku.

Pozdrawiam
Aztech
14.02.2005, 23:29:04
Mam dodatkowe pytanie, jak zmodyfikowac ten skrypt tak na samym poczatku
a) newsy byly zwiniete
cool.gif jesli roziwne jeden news to wszystkie pozostale sie zwina?

ad a) ten problem rozwiazalem tak ale nei wiem jak se poradzic z drugim
[HTML] pobierz, plaintext 
  1. function my_show_div(obj) {
  2.   obj = document.getElementById(obj);  
  3.   obj.style.display == '' ? obj.style.display = 'none' : obj.style.display = ''; 
  4. }
  5.  
  6. function my_divs_init(ajdi) {
  7.   objs = document.getElementsByTagName('div');
  8.  
  9.   for(i = 0, i2 = 0; i < objs.length; i++) {
  10.     if(objs[ i ].id == ajdi) {
  11.       objs[ i ].id = ajdi + i2.toString();
  12.       i2++;
  13.       objs[i].style.display = 'none';
  14.     }
  15.   }
  16.   objs = document.getElementsByTagName('a');
  17.   for(i = 0, i2 = 0; i < objs.length; i++) {
  18.     if(unescape(objs[ i ].href) == "javascript: my_show_div('" + ajdi + "');") {
  19.       objs[ i ].href = "javascript: my_show_div('" + ajdi + i2.toString() + "')";
  20.       i2++;
  21.     }
  22.   }
  23. }
[HTML] pobierz, plaintext
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.