Detlef G.: Element ein-, ausblenden

Beitrag lesen

Hallo Insomnia

Okay… wir brauchen den befehl split() um dem script klar zu machen das eine aneinander hängende kette von Ids nicht eine sache ist sonder das diese auf vielen einzelnen Ids besteht. Und das wissen darüber speichert er dann in einem Array für die weiter Verarbeitung.

Ja, ein wenig sollten wir aber Abstrahieren. Für uns ist es eine Liste von Ids, weil wir es so festgelegt haben. Für split() ist es einfach eine Zeichenkette, ein String, der jeweils beim Trennzeichen (dem Leerzeichen) geteilt wird, und die einzelnen Teile jedes einzeln in ein Element eines Arrays eingetragen wird.
Aus _einer_ Zeichenkette wird eine Reihe von Zeichenketten, die jeweils einen Teil enthalten.

Die „for“ schleife brauchen wir damit das script quasi durchzählen kann wie viel Ids denn nun vorliegen oder überhaupt erfassen kann das es mehr als eine Id ist. Dazu werden wir wohl das Hochzählen der for-schleife nutzen… ich denke so wie im Beispiel  i++ zum Hochzählen genutzt wurde.

Ja, genau.
Und weil i dabei so schön hochgezählt wird, können wir auch bei jedem Schleifendurchlauf eindeutig genau ein Element des Arrays ansprechen. Dazu müssen wir nur bei 0 mit dem Zählen beginnen, weil das erste Arrayelement genau diesen Index hat.

Was mir noch nicht klar ist, wie werden wir die schleife begrenzen… im Beispiel geschieht das ja über <=36, da wir aber keine obergrenze angeben möchten müssen wir dem ganzen sagen… da ist keine Id mehr also schleife genug geschleift…

Das Beispiel zu [link:http://de.selfhtml.org/javascript/objekte/string.htm#split@title=split()] zeigt auch die Anzahl der Wörter an. Dazu wird eine Eigenschaft verwendet, die jedes Array hat: length. Jedes Array weiß selbst, wie lang es ist, wir müssen es nur richtig fragen.

Ich bin gespannt wie s weiter geht.

Wir wissen jetzt, dass wir die einzelnen Ids aus dem übergebenen String (unserer Id-Liste) mit split() schön einzeln in ein Array bekommen.
Wir wissen auch, dass wir mit for einen Befehl oder Block mit Befehlen genau so oft ausführen lassen können, wie wir wollen.
Außerdem können wir durch unsere Zählvariable i bei jedem Schleifendurchlauf nacheinander jedes Arrayelement einzeln ansprechen.

Mit dem Wissen ist es nicht schwer unser Script zu erweitern:

  
function blocks_an_aus (myIds, aktion) { // die Funktion und den Parameter sollten wir umnennen,  
                                         // damit gleich zu sehen ist,  
                                         // dass es auch mehrere sein können  
  
  if (document.getElementById) {  
  
    var IdArr = myIds.split(" ");       // myIds in das Array IdArr splitten  
                                        // IdArr enthält jetzt in jedem Element genau eine Id  
  
    for (var i = 0; i < IdArr.length; i++) { // i auf 0 setzen,  
                                             // bei jedem Schleifendurchlauf um 1 erhöhen,  
                                             // so lange i kleiner als die Anzal der Arrayelemente ist  
  
      var el = document.getElementById (IdArr[i]); // IdArr[i] ist das Arrayelement mit dem Idex i,  
                                                   // damit wird bei jedem Schleifendurchlauf  
                                                   // jeweils nach dem Element gesucht, dessen  
                                                   // Id der nächsten in unserer Liste entspricht  
  
      if (el && el.style) {  
        if (aktion != 'aus') {  
          el.style.display = 'block';  
        } else {  
          el.style.display = 'none';  
        }  
      }  
    }  
  }  
}  

So, damit kann unser Script ein und auch mehrer Elemente gleichzeitig aus- oder einblenden.

Schau es dir an,
frage nach, wenn dir irgendetwas noch nicht wirklich klar ist,
teste es, und frage nach, wenn es sich noch anders verhält, als du es dir vorstellst.

Noch ein paar Anmerkungen:
Die Funktion ist nur für Elemente geeignet, die als Block angezeigt werden sollen (wie Beat anmerkte).
Jemand, bei dem kein Javascript aktiv ist, wird die Info nie lesen können.

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
0 75

deaktiviertes layer,Scrollbalken bleibt sichtbar opera sichtbar

Insomnia
  • css
  1. 0
    Detlef G.
    1. 0
      Insomnia
      1. 0
        Detlef G.
        1. 0
          Insomnia
      2. 0
        Insomnia
        1. 0
          Detlef G.
          1. 0
            Insomnia
            1. 0
              Detlef G.
              1. 0
                Insomnia
                1. 0
                  Insomnia
                  1. 0
                    Insomnia
                    1. 0
                      Detlef G.
                      1. 0
                        Insomnia
                        1. 0
                          Insomnia
                          1. 0

                            Element ein-, ausblenden

                            Detlef G.
                            • javascript
                            1. 0
                              Insomnia
                              1. 0
                                Detlef G.
                                1. 0
                                  Insomnia
                                  1. 0
                                    Insomnia
                                    • css
                                  2. 0
                                    Detlef G.
                                    1. 0
                                      Insomnia
                                      1. 0
                                        Insomnia
                                      2. 0
                                        Detlef G.
                                        1. 0
                                          Detlef G.
                                          1. 0
                                            Insomnia
                                        2. 0
                                          Insomnia
                                          1. 0
                                            Detlef G.
                                            1. 0
                                              Insomnia
                                              1. 0
                                                Beat
                                                1. 0
                                                  Detlef G.
                                                2. 0
                                                  Insomnia
                                              2. 0
                                                Detlef G.
                                                1. 0
                                                  Insomnia
                                                  1. 0
                                                    Detlef G.
                                                    1. 0
                                                      Insomnia
                                                      1. 0
                                                        Detlef G.
                                                        • sonstiges
                                                        1. 0
                                                          Insomnia
                                                        2. 0
                                                          Insomnia
                                                        3. 0
                                                          Insomnia
                                                        4. 0
                                                          Insomnia
                                                          • javascript
                                                          1. 0
                                                            Kai345
                                                            1. 0
                                                              Kai345
                                                              1. 0
                                                                Insomnia
                                                                1. 0
                                                                  Kai345
                                                                2. 0
                                                                  Detlef G.
                                                                  1. 0
                                                                    Insomnia
                                                              2. 0
                                                                Detlef G.
                                                                1. 0
                                                                  Kai345
                                                                  1. 0
                                                                    Detlef G.
                                                                    1. 0
                                                                      Kai345
                                                                      1. 0
                                                                        Insomnia
                                                                        1. 0
                                                                          Insomnia
                                                                          1. 0
                                                                            Detlef G.
                                                                            1. 0
                                                                              Kai345
                                                                              1. 0
                                                                                Insomnia
                                                                                1. 0
                                                                                  Insomnia
                                                                                  1. 0
                                                                                    Insomnia
                                                                                    1. 0
                                                                                      Detlef G.
                                                                                      1. 0
                                                                                        Insomnia
                                                                              2. 0
                                                                                Detlef G.
                                                                                1. 0
                                                                                  Kai345
                                                                      2. 0
                                                                        Detlef G.
                                                                        1. 0
                                                                          Kai345
                                                                          1. 0
                                                                            Detlef G.
                                                                            1. 0
                                                                              Kai345
                                                      2. 0
                                                        Detlef G.
                                                        1. 0
                                                          Insomnia
                                                          1. 0
                                                            Detlef G.
                                                            1. 0
                                                              Insomnia
                                                              1. 0
                                                                Detlef G.
                                                                1. 0
                                                                  Insomnia
                                                                  1. 0
                                                                    Detlef G.
                                                                    1. 0
                                                                      Insomnia
                      2. 0
                        Insomnia