Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jedna klasa do kilku elementów, da się tak?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
MadMark
24.12.2010, 20:40:39
Witam,
napisałem kod:

[HTML] pobierz, plaintext 
  1. <script>
  2. function openClose(id)
  3. {
  4. 	if(document.getElementById)
  5. 	{
  6. 		element = document.getElementById(id);
  7. 	} 
  8. 	else if(document.all) 
  9. 	{
  10. 		element = document.all[id];
  11. 	} 
  12. 	else return;
  13.  
  14. 	if(element.style)
  15. 	{
  16. 		if(element.style.display == 'block' )
  17. 		{
  18. 			element.style.display = 'none';
  19. 			document.getElementById(id+'_clicked').style.display = 'block';
  20. 		}
  21. 		else 
  22. 		{
  23. 			element.style.display = 'block';
  24. 			document.getElementById(id+'_clicked').style.display = 'none';
  25. 			if(getElementsById(id).length > 1)
  26. 			{
  27. 				element.style.margin = "0 "+(70*getElementsById(id).length)+"0 0";
  28. 			}
  29. 		}
  30. 	}
  31. }
  32. </script>
  33. <style>
  34. #menus
  35. {
  36. 	-webkit-border-radius: 10px;
  37. 	-moz-border-radius: 10px;
  38. 	border-radius: 10px;
  39. 	background-color: orange;
  40. 	padding: 1px;
  41. 	position: absolute;
  42. 	left: 35%;
  43. 	/*margin-left: -175px;*/
  44. 	z-index: 101;
  45. 	width: 30%;
  46. 	text-align: center;
  47. 	display: none;
  48. 	margin-top: 50px;
  49. }
  50. #menus .menuss
  51. {
  52. 	-webkit-border-radius: 10px;
  53. 	-moz-border-radius: 10px;
  54. 	border-radius: 10px;
  55. 	background-color: black;
  56. 	color: silver;
  57. 	padding: 10px;
  58. 	height: 100px;
  59. }
  60. #menusss
  61. {
  62. 	-webkit-border-radius: 10px;
  63. 	-moz-border-radius: 10px;
  64. 	border-radius: 10px;
  65. 	background-color: orange;
  66. 	padding: 1px;
  67. 	position: absolute;
  68. 	left: 35%;
  69. 	/*margin-left: -175px;*/
  70. 	z-index: 101;
  71. 	width: 30%;
  72. 	text-align: center;
  73. 	display: none;
  74. 	margin-top: 50px;
  75. }
  76. #menusss .menuss
  77. {
  78. 	-webkit-border-radius: 10px;
  79. 	-moz-border-radius: 10px;
  80. 	border-radius: 10px;
  81. 	background-color: black;
  82. 	color: silver;
  83. 	padding: 10px;
  84. 	height: 100px;
  85. }
  86. </style>
  87. <div id="menus"><div class="menuss">To jest moje znikajace okienko. (1)</div></div>
  88. <div id="menusss"><div class="menuss">To jest moje znikajace okienko. (2)</div></div>
  89.  
  90. <ul align="left" class="topnav">
  91. <li style="display:block;"><a href="java script:void(0); openClose('menus');" onClick="setTimeout('openClose(\'menus\')',5000);" id="menus_clicked">Pokaz 1</a></li>
  92. <li style="display:block;"><a href="java script:void(0); openClose('menusss');" onClick="setTimeout('openClose(\'menusss\')',5000);" id="menusss_clicked">Pokaz 2</a></li>
  93. </ul>
[HTML] pobierz, plaintext


I teraz mam kilka problemów.
  1. Dla dwóch elementów mogłem sobie napisac klasę, ale jak to przerobić, aby klasa była jedna dla wszystkich? Bo jak będę mieć 20 takich to sobie nie dopisze 20 klas ;/
  2. Jak poprawnie zrobić, aby "okienka" pokazywały się jedno pod drugim? (próbowałem z 70*getElementsByTagName(id).length ale to nie działa) - teraz są jedno nad drugim i nawet nie wiem od czego zależy, które będzie na widoku... LUB jak zrobić, aby kolejny tekst po kliknięciu w "coś" następnego dodawał się do diva ?


Ktoś mi to wyjaśni?
Z góry dziękuję.

exclamation.gif! PS > przy fragmencie <a href="java script:void(0); nie ma spacji i nie powinno jej byc w "javascript" ale forum cenzuruje...
shpyo
7.01.2011, 15:55:09
Musisz dynamicznie przypisywać akcje klikalnym elementom i przekazywać im odpowiednie parametry:
Kod
function openClose(id)
{
    if(document.getElementById)
        element = document.getElementById(id);
    else if(document.all)
        element = document.all[id];
    else return;

    if(element.style) {
        if(element.style.display == 'block' ) {
            element.style.display = 'none';
            document.getElementById(id+'_clicked').style.display = 'block';
        }
        else {
            element.style.display = 'block';
            document.getElementById(id+'_clicked').style.display = 'none';
        }
    }
}

//pobieramy wszystkie <a> na które będziemy klikać
var a = document.getElementsByClassName('ak');
for( var i=0,al=a.length; i<al; i++ ) {
    //dla każdego <a> przypisujemy kliknięcie
    a[i].onclick = function() {
        var id = this.getAttribute("id").split('_')[0]; //nasze ID
        openClose( id );
        setTimeout('openClose(\''+ id +'\')',5000);
    }
}


Wtedy LI ma postać:
[HTML] pobierz, plaintext 
  1. 	<li style="display:block;"><a class="ak" href="java script:void(0);" id="menus_clicked">Pokaz 1</a></li>
  2. 	<li style="display:block;"><a class="ak" href="java script:void(0);" id="menusss_clicked">Pokaz 2</a></li>
[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.