Function soll überprüfen, ob layer bereits geöffnet ist und ....

[Newbie]

Moin,

ich möchte auf meiner Homepage zusätzliche Informationen zu bestimmten Themenbereichen verstecken und bei Mausklick auf dieses Thema dann die zusätzlichen Informationen anzeigen lassen. Soweit so gut, das habe ich bereits geschafft :)
Jetzt will ich die Informationen (unterschiedlich lange Texte) an einer bestimmten Stelle auf meiner Homepage anzeigen lassen - eigentlich ja kein großes Problem, weil man ja nur die Position der Texte ändern muss. Doch jetzt überlagern sich die Texte, wenn man mehrere Zusatzinformationen aufeinmal öffnen möchte, weil die einzelnen Zusatzinformationen sich nur schließen, wenn man wieder auf das Thema drückt => ich müsste in meine Funktion anzeigen() irgendwie eine Abfrage integrieren, die überprüft, ob bereits eine Zusatzinformation aktuell offen ist und diese dann schließt, doch hierbei komm ich nicht weiter. Ich weiß nicht so recht, wie diese Abfrage mit Javascript (?) schreiben muss.
Hier mal der Code der Funktion anzeigen ():

  
<script type="text/javascript">  
function anzeigen(layer)  
{  
 if (document.getElementById(layer).style.display=='none')  
	{  
		document.getElementById(layer).style.display='block';  
	}  
	else  
	{  
		document.getElementById(layer).style.display='none';  
	}  
}  
</script>  

Layer steht für die Zusatzinformationen und die Funktion wird über Links aufgerufen, z.B.: <a href="javascript:anzeigen('1')"> .

Was muss ich jetzt in der function anzeigen genau schreiben, dass diese überprüft, ob bereits irgendein Layer (sind übrigens 11 Stück) geöffnet ist und diesen dann schließt und dann den anderen öffnet?

Mit freundlichen Grüßen,
Newbie

[Der Martin]

Hallo,

function anzeigen(layer)
{
if (document.getElementById(layer).style.display=='none')

Layer steht für die Zusatzinformationen und die Funktion wird über Links aufgerufen, z.B.: <a href="javascript:anzeigen('1')"> .

das heißt, du verwendest ungültige ID-Werte. Eine ID in (X)HTML darf nicht mit einer Ziffer beginnen.

Was muss ich jetzt in der function anzeigen genau schreiben, dass diese überprüft, ob bereits irgendein Layer (sind übrigens 11 Stück) geöffnet ist und diesen dann schließt und dann den anderen öffnet?

Das einfachste ist sicher, in einer Schleife alle Elemente zu durchlaufen und zu "schließen", und dann erst das gewünschte zu öffnen. Dann musst du nämlich nicht wissen oder ermitteln, welches vorher geöffnet war.

So long,
 Martin

[ChrisB]

Hi,

Das einfachste ist sicher, in einer Schleife alle Elemente zu durchlaufen und zu "schließen", und dann erst das gewünschte zu öffnen. Dann musst du nämlich nicht wissen oder ermitteln, welches vorher geöffnet war.

Ich finde den anderen Weg einfacher - merken, welches Element zuvor geöffnet wurde, und dieses dann erst wieder schließen.

MfG ChrisB

[gast_42]

Ich finde den anderen Weg einfacher - merken, welches Element zuvor geöffnet wurde, und dieses dann erst wieder schließen.

ich finde den dritten Weg einfacher: übergeordnetem Element eine Klasse zuweisen, die alle Elemente bis auf eins schließt:

<div id="foo">  
 <div id="a">bla</div>  
 <div id="b">bla</div>  
 <div id="c">bla</div>  
</div>  

#a, #b, #c {  
 display:none;  
}  
  
#foo.sehe_a #a {  
 display:block;  
}  
  
#foo.sehe_b #b {  
 display:block;  
}  
  
#foo.sehe_c #c {  
 display:block;  
}  

document.getElementById("foo").className="sehe_b";  

~~~lässt nur div b sichtbar werden  

[ChrisB]

Hi,

ich finde den dritten Weg einfacher: übergeordnetem Element eine Klasse zuweisen, die alle Elemente bis auf eins schließt:

#a, #b, #c {

display:none;
}
#foo.sehe_a #a {
display:block;
}

#foo.sehe_b #b {
...

  
Die Methode hat den Nachteil, dass du beim Hinzufügen neuer Daten im HTML auch dein CSS wieder anpassen musst, um weitere Selektoren zu ergänzen.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[gast_42]

Die Methode hat den Nachteil, dass du beim Hinzufügen neuer Daten im HTML auch dein CSS wieder anpassen musst, um weitere Selektoren zu ergänzen.

der vermeintliche Nachteil ist
1. ohnehin kaum der Rede wert und
2. minimierbar, wenn statt IDs andere Möglichkeiten zum Ansprechen von Elementen genutzt werden.

[ChrisB]

Hi,

Die Methode hat den Nachteil, dass du beim Hinzufügen neuer Daten im HTML auch dein CSS wieder anpassen musst, um weitere Selektoren zu ergänzen.

der vermeintliche Nachteil ist

1. ohnehin kaum der Rede wert und

Natürlich ist er, Stichwort Trennunng von Inhalt, Logik und Präsentation.

2. minimierbar, wenn statt IDs andere Möglichkeiten zum Ansprechen von Elementen genutzt werden.

Zum Beispiel?

MfG ChrisB

[gast_42]

der vermeintliche Nachteil ist

1. ohnehin kaum der Rede wert und

Natürlich ist er, Stichwort Trennunng von Inhalt, Logik und Präsentation.

Diese Trennung ist demnach deiner Meinung nach bei den o.g. JavaScript-Lösungen mit direkter Beeinflussung der style-Eigenschaft gegeben? Ich muss mich doch sehr wundern!

2. minimierbar, wenn statt IDs andere Möglichkeiten zum Ansprechen von Elementen genutzt werden.

Zum Beispiel?

Stichwort Nachfahrenselektoren

[Gunnar Bittersmann]

@@gast_42:

nuqneH

Stichwort Nachfahrenselektoren

Nachfahrenselektoren ist wohl nicht das richtige Stichwort. Eher Kindselektoren.

Besser ist man dran, wenn die betreffenden Elemente direkt selektieren sein, sei es weil sie im HTML5 per 'section' ausgezeichnet sind oder weil sie alle einer Klasse angehören.

Qapla'

[ChrisB]

Hi,

Natürlich ist er, Stichwort Trennunng von Inhalt, Logik und Präsentation.

Diese Trennung ist demnach deiner Meinung nach bei den o.g. JavaScript-Lösungen mit direkter Beeinflussung der style-Eigenschaft gegeben?

Nein, aber wenn du bspw. die Klasse der Elemente selber veränderst.

2. minimierbar, wenn statt IDs andere Möglichkeiten zum Ansprechen von Elementen genutzt werden.

Zum Beispiel?

Stichwort Nachfahrenselektoren

Und was minimierst du dadurch bei deinem Vorschlag?
Bitte werde konkret.

MfG ChrisB

[Newbie]

Ich finde den anderen Weg einfacher - merken, welches Element zuvor geöffnet wurde, und dieses dann erst wieder schließen.

MfG ChrisB

Hi ChrisB,
so wollte ich das ja machen, aber ich weiß nicht, wie ich herausfinden kann, welches Element von den 11 Stück offen ist und welches geschlossen?!

mfg,
Newbie

[ChrisB]

Hi,

Ich finde den anderen Weg einfacher - merken, welches Element zuvor geöffnet wurde, und dieses dann erst wieder schließen.

so wollte ich das ja machen, aber ich weiß nicht, wie ich herausfinden kann, welches Element von den 11 Stück offen ist und welches geschlossen?!

Wie ich schon schrieb, in dem du dir in deinem Script „merkst“, welches zuvor geöffnet wurde. „Merken“ kann man mit Variablen.

MfG ChrisB

[Newbie]

Wie ich schon schrieb, in dem du dir in deinem Script „merkst“, welches zuvor geöffnet wurde. „Merken“ kann man mit Variablen.

Hi,
aber wie kann ich denn mit Variablen überprüfen, ob ein Element hidden oder visible ist?
Mit freundlichen Grüßen,
Newbie

[Struppi]

aber wie kann ich denn mit Variablen überprüfen, ob ein Element hidden oder visible ist?

Gar nicht, du solltst dir nur merken, welches Element geöffnet ist.

Grob in etwa so:

var offen  
function anzeigen(layer) {  
    var el = document.getElementById(layer);  
    if(el) el.style.display = 'block'; else alert('Fehler');  
    if(offen) offen.style.display = 'none';  
    offen = el;  
}  

Struppi.

[Newbie]

aber wie kann ich denn mit Variablen überprüfen, ob ein Element hidden oder visible ist?

Gar nicht, du solltst dir nur merken, welches Element geöffnet ist.

Grob in etwa so:

var offen

function anzeigen(layer) {
    var el = document.getElementById(layer);
    if(el) el.style.display = 'block'; else alert('Fehler');
    if(offen) offen.style.display = 'none';
    offen = el;
}

> Struppi.  
  
Ok danke :)

[Gunnar Bittersmann]

@@Newbie:

nuqneH

function anzeigen(layer)
{
if (document.getElementById(layer).style.display=='none')
{
document.getElementById(layer).style.display='block';
}
else
{
document.getElementById(layer).style.display='none';
}
}

Zusätzlich zu den anderen Antworten: Es ist unsinnig, sich dasselbe Element dreimal aus dem DOM rauszusuchen. Besser einmal und die gefundene Referenz in einer Variablen speichern:

function anzeigen(id)  
{  
  var element = document.getElementById(id);  
  if (element.style.display == 'none')  
  {  
    element.style.display = 'block';  
  }  
  else  
  {  
    element.style.display = 'none';  
  }  
}

was sich auch http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=kürzer schreiben lässt:

function anzeigen(id)  
{  
  var element = document.getElementById(id);  
  element.style.display = (element.style.display == 'none' ? 'block': 'none';  
}

Besser wäre es aber wohl, nicht die ID als Parameter zu übergeben, sondern schon die Referenz auf das Element:

function anzeigen(element)  
{  
  element.style.display = (element.style.display == 'none' ? 'block': 'none';  
}

Aufruf mit anzeigen(document.getElementById('foo')) bzw. möglicherweise einfach per anzeigen(this).

Qapla'

[Matti Maekitalo]

Tach auch.

Besser wäre es aber wohl, nicht die ID als Parameter zu übergeben, sondern schon die Referenz auf das Element:

function anzeigen(element)

{
  element.style.display = (element.style.display == 'none' ? 'block': 'none';
}

>   
> Aufruf mit `anzeigen(document.getElementById('foo'))`{:.language-javascript} bzw. möglicherweise einfach per `anzeigen(this)`{:.language-javascript}.  
  
Ich habe vorhin kurz überlegt, einen ähnlichen Tipp zu geben. Habe dann aber festgestellt, dass es sich an der Stelle nicht wirklich lohnt.  
  
Bei Variante 1 hat man im Prinzip keinen Code gespart, im Gegenteil (ich finde "inline"-JS innerhalb HTML nicht so schön und fasse mich da möglichst kurz, und EventHandler außerhalb zu definieren ist mir für einfache Sachen wie onclick zu doof).  
  
Zweite Variante krankt daran, dass der in diesem Zusammenhang meistbenutzte Handler onclick auf nicht sichtbaren Elementen eher schwer zu triggern ist :)  
  
Bis die Tage,  
Matti

-- 
[Webapplikationen in C++ entwickeln](http://tntnet.org/)

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

was sich auch http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=kürzer schreiben lässt:

function anzeigen(id)

{
  var element = document.getElementById(id);
  element.style.display = (element.style.display == 'none' ? 'block': 'none';
}

  
Bevor jemand „funzt nicht“ sagt: Ja, natürlich nicht. Die geöffnete Klammer muss auch wieder geschlossen werden.  
  
Wobei die Klammern gar nicht erforderlich sind, sondern lediglich der besseren Lesbarkeit des Codes dienen.  
  
  

> ~~~javascript

function anzeigen(element)  

> {  
>   element.style.display = (element.style.display == 'none' ? 'block': 'none';  
> }

Dito.

Qapla'