Mit getElementById(); mehrere IDs ansprechen

Hi!

Ich habe bei Deiner Funktion
function open_close(part)
{
for (var i = 0; i < 10; i++)
{
var obj = document.getElementById(part+i);
if(obj)
obj.style.display = (obj.style.display == "none") ? "" : "none";
}
}
Zum Vergrößern anklicken....
gesehen das Du doch nur eine ID übergibts, also auch nur ein Element einblenden willst.
Auf dieser Basis habe ich mal schnell was zusammengeschustert, daher ist auch keine Prüfung auf Existenz des jeweiligen Elementes oder auf 'getElementById()' vorhanden. Dazu kommt noch das man den Code bestimmt noch optimieren müsste. Aber das steht Dir frei ;) . Jedenfalls funktionierts...
Code: 
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>Free to use</title>
<script language="JavaScript" type="text/javascript">
<!--
function open_close(){
    this.elIdent    = '';
    this.maxEl      = 0;
}
open_close.prototype.open = function(fEl){
    var idName = '';
    for( var i=0; i<this.maxEl; i++ ){
        idName = this.elIdent+i;
        if( i!=fEl ){
            document.getElementById(idName).style.display = "none";
        }else{
            document.getElementById(idName).style.display = "";
        }
    }
    return true;
};
//-->
</script>
</head>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

    <table width="300" border="0" cellspacing="1" cellpadding="2">
    <tr>
    <td align="left" valign="top" style="background-color: #d6d6d6;" onclick="myObj.open(0);">Öffne Bereich 1</td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #eeeeee; display: none;" id="rowEl_0">Inhalt Bereich 1<br>.........................<br>.........................<br></td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #d6d6d6;" onclick="myObj.open(1);">Öffne Bereich 2</td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #eeeeee; display: none;" id="rowEl_1">Inhalt Bereich 2<br>.........................<br>.........................<br></td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #d6d6d6;" onclick="myObj.open(2);">Öffne Bereich 3</td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #eeeeee; display: none;" id="rowEl_2">Inhalt Bereich 3<br>.........................<br>.........................<br></td>
    </tr>
    </table>

    <script language="JavaScript" type="text/javascript">
    <!--
    myObj = new open_close();
    myObj.elIdent   = 'rowEl_';
    myObj.maxEl     = 3;
    //-->
    </script>

</body>
</html>

MfG
 
Zuletzt bearbeitet:
Danke für deine Antwort... Ich werde mir den Code noch einmal genauer angucken.
Ehrlich gesagt verstehe ich die ganzen Elemente nicht wirklich ;)

Zu meiner Denkweise.

Ich habe in der Navigation jeden Eintrag als <tr> gemacht. Jedes <tr> hat eine ID die sich aus z.B. a5 zusammensetzt. Damit ist "Gruppe A" gemeint und das 5. <tr>.

Ich gehe also mit der for() schleife alle Zahlen bis 10 durch und übergebe einfach nur den Gruppen-Buchstaben.

:)
 
Hi!

Also Du hast, sagen wir mal, 10 TRs. Dies TRs haben jeweils eine eigene ID bekommen die aus einem Buchstaben und einer Ziffer bestehen.
Code: 
<tr id="a0">
...
<tr id="a9">
Nach dem ganzen TR-Zeug initialisierst Du erstmal ein neues Objekt über das Du das Ein- und Ausblenden realisieren kannst.
Code: 
    <script language="JavaScript" type="text/javascript">
    <!--
    myObj = new open_close();
    myObj.elIdent   = 'a';
    myObj.maxEl     = 9;
    //-->
    </script>

Mit 'myObj.elIdent' sage ich meinem Objekt (oder speichere in meinem Objekt) wie die ID der TRs anfängt. In diesem Fall mit einem 'a'. Hat den Vorteil das man jetzt nur seinem Objekt noch sagen muss wieviele TRs es gibt die es bedienen soll, und der weitere Scriptablauf braucht nur noch mit Zahlen zu arbeiten. In Deinem Fall sind es 10 TRs und damit setzen wir hier eine 9, da JS bei 0 anfängt mit zählen.

So das Objekt weis jetzt mit was der erste Teil der TR-ID beginnt und wieviele TRs es gibt.

Als nächstes kommt der eigentliche Aufruf:
Code: 
myObj.open(0);

Bedeutet ich will das das TR mit der ID 'a0' geöffnet wird. Jetzt passiert folgendes.
Code: 
    for( var i=0; i<this.maxEl; i++ ){
        idName = this.elIdent+i;
        if( i!=fEl ){
            document.getElementById(idName).style.display = "none";
        }else{
            document.getElementById(idName).style.display = "";
        }
    }
  • Die for-Schleife läuft solange bis i=der Anzahl TRs ist, also=maxEl das wir mit 9 bestimmt haben (JS beginnt bei 0 an mit zählen)
  • dann setzen wir uns die momentane ID zusammen. 'idName' entsteht aus 'elIdent' das wir mit 'a' bestimmt hatten und des momentanen Zählers 'i'. Also wäre meinetwegen die momentane ID mal mmh... sagen wir 'a3' meinetwegen. OK?
  • wir prüfen dann ob 'i' nicht gleich 'fEl' ist. Ist dem so dann blende das Element mit der momentan generierten (zusammengesetzten) ID aus.
    'fEl' ist, erinnere Dich an den Aufruf 'myObj.open(0);', auf 0 gesetzt. bzw. haben wir die 0 an die Funktion 'open()' übergeben.
  • ist 'i' jedoch gleich 'fEl' (fEl wäre dann ja das Element was wir öffnen bzw. anzeigen wollen) blende das Element mit der soeben generierten (zusammengesetzten) ID ein.


So, hoffe ich konnt ein bisserl Licht ins Dunkel bringen ;)

MfG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück