Function toggle

Scrabyard · 12. November 2019 um 05:29

Hallo!

Ich möchte eine Liste mit vielen Einträgen haben, zu denen jeweils zusätzliche Infos angezeigt werden, wenn man auf die Einträge klickt. Dazu habe ich folgendes script benutzt, welches auch shcon ganz gut funktioniert, die Einträge lassen sich per Klick öffnen und schließen, jedoch möchte ich, dass wenn bereits ein Eintrag offen ist und man klickt auf einen anderen, dass dann automatisch der andere Eintrag, den man zuvor geöffnet hatte, geschlossen wird. Momentan öffnet sich der neue Eintrag, jedoch bleibt der/die alte/n Einträge offen, das wird schnell unübersichtlich… Hier mein bisheriger code:

Test

#menu a {
text-decoration: none;
color: black;
}

div.content {
align: left;
margin-left: 30px;
padding: 10px;
display: none;
}

function toggle(id){
obj = document.getElementById(id);
obj.style.display = (obj.style.display == ‚block‘) ? ‚none‘ : ‚block‘;
}

Test:

[Eintrag 1](javascript:toggle(‚eintrag1‘)

INHALT 1

[Eintrag 2](javascript:toggle(‚eintrag2‘)

INHALT 2

Ich dachte, dass ich in das Javascript an den Anfang der Funktion toggle einen Befehl einfüge, der alle Inhalte wieder versteckt, egal wieviele zu oder offen (sollte es richtig funktionieren ist eben immer maximal einer offen) sind. Meine bisherigen Versuche (getElementsbyClass) blieben leider ohne Erfolg…

Vielen Dank schonmal!

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:30

z.b. so

function toggle(id){
 if (typeof toogle.lastopen == 'undefined') {
 toogle.lastopen = '';
 }
 if (id != toogle.lastopen && toogle.lastopen != '') {
 obj = document.getElementById(toogle.lastopen);
 obj.style.display = 'none';
 }
 obj = document.getElementById(id);
 obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
 toogle.lastopen = id;
}

Scrabyard · 12. November 2019 um 05:31

Danke für die Antwort, die Funktion hat zwar so nicht funktioniert, aber die Idee mit dem id merken ist gut, hab’s jetzt so gelöst:

var active_div = null;
function toggle(id) {
if(active_div != null && id != active_div) {
document.getElementById(active_div).style.display = ‚none‘;
}
obj = document.getElementById(id);
obj.style.display = (obj.style.display == ‚block‘) ? ‚none‘ : ‚block‘;
active_div = id;
}

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:31

Moin moin,

Danke für die Antwort, die Funktion hat zwar so nicht
funktioniert, aber die Idee mit dem id merken ist gut, hab’s
jetzt so gelöst:

Tja , da war wohl was in deinem code . nachdem ich alles noch mal selber geschrieben habe und nicht deinen via copy und paste , funktioniert es auch .

var active_div = null;

schlechter stil , globale variablen sollte man vermeiden .

hier die getestete version . keine globale variable sonder eine member variable .

Bei Klick auf Checkbox 1 oder 2 einblenden.

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:31

der trick mit der member variable kommt
vom c++ wo man eine variable als static
deklarienen kann
.

Statische Variablen
Lokale Variablen können als statisch definiert werden.[1] Statische Variablen werden erzeugt und initialisiert, wenn ihre Definition zum ersten Mal durchlaufen wird. Die Variable und ihr Inhalt bleiben dann bis zum Ende des Programms erhalten. Um eine Variable als statische Variable zu definieren, wird der Definition das Schlüsselwort static vorangestellt.
Sichtbarkeit
Die Variable ist nur in dem Block sichtbar, in dem sie definiert wurde. Im Gegensatz zu einer globalen Variablen kann auf sie nicht von außerhalb zugegriffen werden. Eine statische Variable ist also das Mittel der Wahl, wenn eine Funktion eine Art Gedächtnis dafür braucht, was beim letzten Funktionsaufruf ausgeführt worden ist.

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:31

noch was dazu

definiert wurde. Im Gegensatz zu einer globalen Variablen kann
auf sie nicht von außerhalb zugegriffen werden.

das trifft hir nicht zu , man kann auch von aussen , auf den wert zugreifen . functionsname.wert geht überall wo die funktion sichtbar ist.

Nitya · 12. November 2019 um 05:32

was soll das?

ein toggle.last object zu erzeugen (welches natürlich global ist)
innerhalb der funktion obj global zu deklarieren?

var last=false;
function toggle(id) {
if (last) {
document.getElementById(id).style.display = ‚none‘;
last=false;
}
else{
document.getElementById(id).style.display = ‚block‘;
last=true;
}
}

Nitya · 12. November 2019 um 05:32

Hallo Scrab,
ohne irgendwelche „merker-member“ )

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

h♥rzlichen Gruß
Nitya

Scrabyard · 12. November 2019 um 05:33

Hallo,

sowas hatte ich mir anfangs auch gedacht, aber es funktioniert aus mir unersichtlichen Gründen einfach nicht^^

Trotzdem danke für die Bemühungen, um ein „Gedächtnis“ scheine ich wohl nicht drumrum zu kommen…

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:33

kann doch gar nicht funktionieren , du hast do verschiedene
div objekte , also woher soll das system wissen was als letztes offen war.

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:33

Moin moin,

was soll das?

ein toggle.last object zu erzeugen (welches natürlich global
ist)

nein es ist ein member es ist nur für die funktion , bzw ist javascript funktion gleich objekt etc .

und wenn du schon mal c programmiert hast und mal gegugt hast was ich geschreiben hab dann würde dir das auch klar sein. static variablen sind pflicht.

die funktion funktioniert nur so, weil sie braucht ein gedächnis, welches das letzte objekt war .

es geht hier icht darum ein oder 2 bekannte objekte zu schliessen, sondern aus einer vielzahl das letzte .

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:33

du könntest höchstens immer alle schliessen lassen und nur das öffnen was du gerade gewählt hast.

das ist aber nicht prickelnt X divs erstmal zu schliessen um dann 1 anzuzeigen.

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:33

übrigens wird dir der sinn das lieber in die funktion zu packen schnell klar , wenn du dir nach jahrelanger tüfellei eine funktions biliothek zusammen geschustert hast . Nach einiger Zeit vergisst man schon mal solche variablen die ausserhabl einer funktion ist die eigentlich in sich ihre aufgabe erfüllen sollte.

gehen tut alles , aber normalerweise wollen programmierer was dazu lernen und nicht auf ihrem verfahren bestehen (vor allem wenns gar kein grund gibt ). Die einsicht hast Du wohl weniger . Scheint ja so als würdest du meine Lösung misbilligen , wobei deine lösung für was ganz anderes gemacht wurde.

Thomas_Punkt_6ec4bd · 12. November 2019 um 05:33

Moin moin,

Hallo Scrab,
ohne irgendwelche „merker-member“ )

du hast ja auch die aufgabe nicht begriffen .

X divs , das was vorher offen war soll wieder geschlossen werden, das was gerade angeklickt wird soll auf und zu gehen (also bei doppel klick wieder verschwinden)

1 durchlauf .

id = div1

function toggle(id) {
var obj=document.getElementById(id);

obj = div1

if (obj.style.display==‚none‘) {

obj ist geschlossen

obj.style.display = ‚block‘;

also öffnen .

}
else if (obj.style.display==‚block‘) {
obj.style.display = ‚none‘;
}
}

2 durchlauf .

id = div2

function toggle(id) {
var obj=document.getElementById(id);

obj = div2

if (obj.style.display==‚none‘) {

obj ist geschlossen

obj.style.display = ‚block‘;

also öffnen .

}
else if (obj.style.display==‚block‘) {
obj.style.display = ‚none‘;
}
}

div1 und div2 sind nun offen !!!

ich mach gar nciht erst den dritten durchlauf weil der bringt es auch nicht.

h♥rzlichen Gruß
Nitya

Nachdenken wass die frage ist, und dann ausprobieren .