toggle news script problem :-)

S

signo

Grünschnabel
Hi nun ist es endlich soweit das ich gar nicht mehr weiter weiss :D ich habe sämtlich tutorials abgeklappert und geschaut aber nirgends eine problemlösung gefunden.

hier erstmal der quelltext

Code: 
<html>
<head>
<script type="text/javascript">

var last = '';
var stat = 0;

function toggle(id){
    //1:
    if(stat==0){
      document.getElementById(id).style.display = 'block';
      document.hid1.src = "minus.gif";
      stat = 1;
      last = id;
    }else if((stat==1)&&(last==id)){
      document.getElementById(last).style.display = 'none';
      document.hid1.src = "plus.gif";
      stat = 0;
      last = id;
    }else{
      document.getElementById(last).style.display = 'none';
      document.getElementById(id).style.display = 'block';
      document.hid1.src = "plus.gif";
      stat = 1;
      last = id;
    }
    
   
}

</script>

</head>

<body>
<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test1')">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 11</b></span>
</td></tr></table></td></tr>



<tr><td><div style="display:none;" id="test1">
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
</div></td></tr>



</body>
</html>

so das ganze funktioniert auch wunderbar einwandfrei ! problem an der sache ist aber ich kann das nur einmal anzeigen auf der seite.
sobald ich das toggle script zweimal aufrufen will (ich verändere auch die ids ^^) funktioniert die bildanzeige nicht mehr, d.h. es wird nur noch ein plus angezeigt.

ich vermute das hängt mit dem document.hid1.src = "plus.gif"; und dem namen des images zusammen ! da hab ich auch schon alles probiert (unterschiedliche ids,namen ect.) nichts ging :(

nun hoffe ich, dass jemand weiss wie das fuer mehrere toggle anzeigen ,so dass immer da wo ich draufklicke auch + bzw. minus kommt :D

danke schonmal
 
Hi,

Du "merkst" Dir in stat und last immer nur eine ID bzw. einen Zustand.
Willst Du jedoch mehr Bereiche mit Toggle-Eigenschaften ausstatten, so musst
Du auch entsprechend viele Möglichkeiten zum Speichern schaffen. Am einfachsten
erreichst Du das über Arrays.

Das folgende Script demonstriert Dir das Prinzip für drei Toggle-Bereiche, wobei
die Zählung bei Null beginnt.
Code: 
var arrLast = new Array('', '', '');  // Array für IDs
var arrStat = new Array(0, 0, 0);  // Array für Zustände

function toggle(id, intBereich){
    //1:
    if(arrStat[intBereich]==0){
        document.getElementById(id).style.display = 'block';
        document.hid1.src = "minus.gif";
        arrStat[intBereich] = 1;
        arrLast[intBereich] = id;
    }else if((arrStat[intBereich]==1)&&(arrLast[intBereich]==id)){
        document.getElementById(arrLast[intBereich]).style.display = 'none';
        document.hid1.src = "plus.gif";
        arrStat[intBereich] = 0;
        arrLast[intBereich] = id;
    }else{
        document.getElementById(arrLast[intBereich]).style.display = 'none';
        document.getElementById(id).style.display = 'block';
        document.hid1.src = "plus.gif";
        arrStat[intBereich] = 1;
        arrLast[intBereich] = id;
    }
}
Der entsprechende HTML-Abschnitt könnte beispielsweise wie folgt aussehen:
Code: 
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test1', 0)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test1">
            Text im Bereich 0<br>
            </div>
        </td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test2', 1)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test2">
            Text im Bereich 1<br>
            </div>
        </td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test3', 2)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test3">
            Text im Bereich 2<br>
            </div>
        </td>
    </tr>
</table>
Ciao
Quaese
 
jau das mit den texten funktioniert einwandfrei :D

ich hab deinen quelltext mal testweise übernommen

Code: 
<html>
<head>
<script type="text/javascript">

var arrLast = new Array('', '', '');  // Array für IDs
var arrStat = new Array(0, 0, 0);  // Array für Zustände

function toggle(id, intBereich){
    //1:
    if(arrStat[intBereich]==0){
        document.getElementById(id).style.display = 'block';
        document.hid1.src = "minus.gif";
        arrStat[intBereich] = 1;
        arrLast[intBereich] = id;
    }else if((arrStat[intBereich]==1)&&(arrLast[intBereich]==id)){
        document.getElementById(arrLast[intBereich]).style.display = 'none';
        document.hid1.src = "plus.gif";
        arrStat[intBereich] = 0;
        arrLast[intBereich] = id;
    }else{
        document.getElementById(arrLast[intBereich]).style.display = 'none';
        document.getElementById(id).style.display = 'block';
        document.hid1.src = "minus.gif";
        arrStat[intBereich] = 1;
        arrLast[intBereich] = id;
    }
}
</script>

</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test1', 0)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test1">
            Text im Bereich 0<br>
            </div>
        </td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test2', 1)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test2">
            Text im Bereich 1<br>
            </div>
        </td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test3', 2)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test3">
            Text im Bereich 2<br>
            </div>
        </td>
    </tr>
</table>


</body>
</html>

wenn ich ihn so verwende ändert sich beim klicken nicht das gif bild (es kommt kein minus bild) soweit war ich ja vorher schon :D auch ohne arrays ^^
 
Hi,

stimmt, kann ja so gar nicht funktionieren. Die IDs der Bilder muss ja auch noch
einbezogen werden. Ich habe das Ganze mal in den Anhang gepackt. Schau's Dir
einfach mal an.

Ciao
Quaese
 
Hi,

wenn ich mir Deine Seite mit dem IE6 ansehe, funktioniert es so, wie Du es haben
wolltest. Es klappt auf und zu - das Plus wechselt zum Minus und umgekehrt.

Ciao
Quaese
 
korrekt nur soweit war ich vorher schon :D also das es im ie ! aber es bei mozilla zum beispiel nicht ! ich bekomme es auch mit mozilla zum laufen allerdings nur mit einem toggle pro seite :-(
 
Morgen,

Fehler gefunden!

In den IMG-Tags stehen name-Attribute (z.B. name="hid1"). Es müssen jedoch IDs
sein (z.B. id="hid1").

Wenn Du das geändert hast, sollte es funktionieren. Ich habe es im IE6, Opera 7.22,
Netscape 7.1 und Mozilla 1.6 erfolgreich getestet.

Ciao
Quaese
 
wunderbar super :D

nur ein problem habe ich noch :D du sagtest das wäre fuer 3 toggles. wenn ich jetzt aber ne newsseite habe wo das optional ist:

also 10 news werden maximal angezeigt wovon alle das toggle enthalten können oder keins oder mehrere !

wie bekomm ich dann das javascript dynamisch hin ? weil können ja mal 3 mal 4 sein und dann wäre doch das array zu klein oder ? :D
 
Hi,

Du kannst die Arrays ja dynamisch anlegen lassen. Dazu musst Du nur wissen, wieviele
Toggles die entsprechende Seite enthält.

Um das zu realisieren, ersetzt Du folgenden Script-Abschnitt
Code: 
var arrLast = new Array('', '', '');  // Array für IDs
var arrStat = new Array(0, 0, 0);  // Array für Zustände
hiermit
Code: 
var intAnzahlToggles = 3;   // Anzahl der Toggles in einer Seite
var arrLast = new Array();  // Array für IDs
var arrStat = new Array();  // Array für Zustände

// Arrays initialisieren
for(i=0; i<intAnzahlToggles; i++){
    arrLast[i] = '';  // Keine ID
    arrStat[i] = 0;   // Kein Zustand
}
Durch Ändern der Variablen intAnzahlToggles kannst Du die Anzahl der
enthaltenen Toggles bestimmen.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück