Jedna klasa do kilku elementów, da się tak? Opcje

[MadMark]

Witam,
napisałem kod:

[HTML] pobierz, plaintext 
<script>
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';
			if(getElementsById(id).length > 1)
			{
				element.style.margin = "0 "+(70*getElementsById(id).length)+"0 0";
			}
		}
	}
}
</script>
<style>
#menus
{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: orange;
	padding: 1px;
	position: absolute;
	left: 35%;
	/*margin-left: -175px;*/
	z-index: 101;
	width: 30%;
	text-align: center;
	display: none;
	margin-top: 50px;
}
#menus .menuss
{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: black;
	color: silver;
	padding: 10px;
	height: 100px;
}
#menusss
{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: orange;
	padding: 1px;
	position: absolute;
	left: 35%;
	/*margin-left: -175px;*/
	z-index: 101;
	width: 30%;
	text-align: center;
	display: none;
	margin-top: 50px;
}
#menusss .menuss
{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: black;
	color: silver;
	padding: 10px;
	height: 100px;
}
</style>
<div id="menus"><div class="menuss">To jest moje znikajace okienko. (1)</div></div>
<div id="menusss"><div class="menuss">To jest moje znikajace okienko. (2)</div></div>
 
<ul align="left" class="topnav">
<li style="display:block;"><a href="java script:void(0); openClose('menus');" onClick="setTimeout('openClose(\'menus\')',5000);" id="menus_clicked">Pokaz 1</a></li>
<li style="display:block;"><a href="java script:void(0); openClose('menusss');" onClick="setTimeout('openClose(\'menusss\')',5000);" id="menusss_clicked">Pokaz 2</a></li>
</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ę.

! PS > przy fragmencie <a href="java script:void(0); nie ma spacji i nie powinno jej byc w "javascript" ale forum cenzuruje...

Ten post edytował MadMark 24.12.2010, 21:31:38

[shpyo]

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

Ten post edytował shpyo 7.01.2011, 15:56:02