Entwickler-Ecke
Programmiersprachen (Client) - [html] toggle Problem
JungerIslaender - So 29.01.12 04:35
Titel: [html] toggle Problem
Quelltext
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32:
| <script type="text/javascript" language="JavaScript"> <!-- Begin
function toggleMe(a){
// beim Einblenden einer Box generell alle ausblenden //alleaus()
var e=document.getElementById(a); if(!e)return true; if(e.style.display=="none"){ e.style.display="block" } else { e.style.display="none" } return true; }
// hier müssen alle Container-IDs eingetragen werden // die Funktion schaltet alle Boxen auf unsichtbar
function alleaus() { para01.style.display="none" para02.style.display="none" para03.style.display="none" para04.style.display="none" para05.style.display="none" }
// End --> </script> |
Funktioniert bei mir super um container ein/aus zublenden.
Sobald ich aber:
in
alleaus()
ändere, damit nur jeweils 1 container sichtbar ist. Passiert gar nichts mehr.
Moderiert von Christian S.: Topic aus Off Topic verschoben am So 15.07.2012 um 12:57
jaenicke - So 29.01.12 07:31
Naja, überlege dir einmal was bei dieser Zeile wohl herauskommen wird, wenn du vorher alle ausgeblendet hast: ;-)
Quelltext
1:
| if(e.style.display=="none"){ |
Das hättest du aber auch im Debugger sehen können was da passiert. ;-)
Lösung:
Den Status vor dem Ausblenden zwischenspeichern oder deiner Ausblendfunktion das aktuelle Element mitgeben und dieses unverändert lassen.
Nebenbei:
Statt da für jedes Element eine neue Zeile hinzuzufügen, wäre es sinnvoller ein Array zu benutzen, z.B. so (ungetestet):
Quelltext
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30:
| <script type="text/javascript" language="javascript"> <!-- Begin
// hier müssen alle Container-IDs eingetragen werden // die Funktion schaltet alle Boxen auf unsichtbar var MyElements = new Array('para01', 'para02', 'para03', 'para04', 'para05');
function toggleMe(a){
// beim Einblenden einer Box generell alle ausblenden alleaus(a)
var e=document.getElementById(a); if(!e)return true; if(e.style.display=="none"){ e.style.display="block" } else { e.style.display="none" } return true; }
function alleaus(a) { for (var i = 0; i < MyElements.length; ++i) if (MyElements[i] != a) document.getElementById(MyElements[i]).style.display = "none"; }
// End --> </script> |
JungerIslaender - So 29.01.12 16:10
Funktioniert super! Nur ich versteh nicht warum es jetzt funktioniert. :D Die funktionsweise ist schon klar. Aber warum funktioniert es jetzt und vorher nicht?
jaenicke - So 29.01.12 16:29
Ich verdeutliche es mal in Delphi. ;-)
Delphi-Quelltext
1: 2: 3: 4: 5: 6: 7:
| Label1.Visible := False; Label2.Visible := False;
if Label1.Visible then Label1.Visible := False else Label1.Visible := True; |
Zuerst setzt du alle Elemente auf unsichtbar und danach schaust du nach, welche unsichtbar und welche sichtbar sind. Wie soll aber noch eines sichtbar sein, wenn du direkt vorher alle unsichtbar gemacht hast?
Das aktuelle Element ist also immer unsichtbar und wird daher immer sichtbar gemacht.
JungerIslaender - So 29.01.12 16:53
Super Danke!
MFG JungerIslaender
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!