Bildertausch "oncklick" / if-Abfrage

[typograph]

Seid gegrüßt!

Zu allererst: Ich lerne seit etwa einem halben Jahr JavaScript mithilfe mehrerer Bücher, bin also Anfänger.

Folgendes Problem
Ich habe eine Navigation mit mehreren Überschriften (<h2>) an die jeweils eine <ul> anschließt. Die Listen sind per CSS (display:none;) ausgeblendet und werden mit JavaScript wieder eingeblendet. Zu diesem Zweck besitzt jede Überschrift einen eigenen Link (Bild mit einem Plus-Symbol).

Wird die entsprechende Liste aufgeklappt, soll sich das Bild im Link ändern (Minus-Symbol). Dies habe ich mit einer Funktion, welche eine if-Abfrage enthält gelöst:

Der JavaScript-Code:

  
var i = 0;  
  
function change(name){  
	if (i == 0) {  
		document.getElementById(name).src="bilder/sitelayout/buttons/js-slide-open.jpg";  
		i++;  
	} else {  
		document.getElementById(name).src="bilder/sitelayout/buttons/js-slide-closed.jpg";  
		i--;  
	}  
}  

Der HTML-Code:

  
<h2 style="padding-left:19px; position:relative;">  
<a style="display:block; width:12px; height:12px; position:absolute; top:50%; left:0; margin-top:-6px;" href="javascript:toggle('js_variablen')">  
<img id="listbutton-1" onclick="change('listbutton-1')" src="bilder/sitelayout/buttons/js-slide-closed.jpg" width="12px" height="12px">  
</a>  
<a href="js-variablen">Variablen</a></h2>  

So sieht's aus: http://www.dertypograph.com/javascript.php

Ich arbeite hier mit Übergabewerten, um die Funktion für alle Links verwenden zu können (unterschiedliche IDs).

Das Problem ist nun die Variable "i". Beim ersten onclick-Ereignis ändert sich diese auf den Wert 1. Möchte man mehrere Listen auf der Seite aufklappen, funktioniert der Bildtausch natürlich nicht entsprechend (falsches Bild).

Wie könnte ich das Problem in den Griff bekommen?
Eigentlich müsste ich zwei Bedingungen prüfen: Den Wert der Variablen "i" in Verbindung mit dem vorhandenen Bild ...?

Ich hoffe, ich habe mich verständlich ausgedrückt.

Vielen Dank im Voraus!
Typograph

[JürgenB]

Hallo typograph,

du könntest mit einer Statusvariable für jedes Bild arbeiten oder im src des Bildes nach "open" bzw. "closed" suchen.

Gruß, Jürgen

[Steel]

Moin!

Verpasse jeder Liste eine Eigenschaft, die beschreibt ob die Liste offen oder geschlossen ist und benutze diese.

[typograph]

Moin!

Verpasse jeder Liste eine Eigenschaft, die beschreibt ob die Liste offen oder geschlossen ist und benutze diese.

Hallo Steel!

Danke für die rasche Antwort!
Für einen Anfänger ist diese Antwort jedoch eine unmögliche Herausforderung.
Dürfte ich um ein wenig Code als Beispiel bitten?
Jede einzelne Liste benutzt jedenfalls eine eigene ID.

Lieben Gruß
Typograph

[Steel]

Moin!

Verpasse jeder Liste eine Eigenschaft, die beschreibt ob die Liste offen oder geschlossen ist und benutze diese.

Hallo Steel!

Danke für die rasche Antwort!
Für einen Anfänger ist diese Antwort jedoch eine unmögliche Herausforderung.

Och. Damit konntest Du aus der Suchmaschine deiner Wahl nix rauskitzeln? ;) Naja. Schon klar. Ich weiss ja nicht, wie weit Du bist. NAchfragen ist doch ok.

Dürfte ich um ein wenig Code als Beispiel bitten?

Sicher. 10.- Euro. :)

Mir war grad danach, gemein zu sein. ;) Eigentlich kannst Du einfach durch Benutzung eine neue Eigenschaft generieren: document.getElementById(Element).activemenu = 0
Kann man gemuetlich mit einer Schleife erledigen, sofern die Elemente entsprechend im DOM eingebaut sind.

Du musst nur aufpassen dass Du nichts ueberschreibst.

Jede einzelne Liste benutzt jedenfalls eine eigene ID.

Dann weisst Du ja jetzt hoffentlich, was zu tun ist. :)

[Worf]

Hallo,

-%- Eigentlich kannst Du einfach durch Benutzung eine neue Eigenschaft generieren: document.getElementById(Element).activemenu = 0

.. oder Klassen verwenden und diese entspr. wechseln (Ändere keine CSS-Eigenschaften per JavaScript!).

Das ganze liesse sich - je nach gewünschter/geforderter Browser-Abdeckung - auch ganz ohne JavaScript realisieren, ggf. unter Verwendung des label-Elements.

Gruss,
Worf

[typograph]

Sei gegrüßt Steel!

Danke für Deine Hilfe.
Mein grundsätzliches Problem bestand darin, dass ich innerhalb der Funktion, welche für das Aufklappen der Liste zuständig ist, auf das <img>-Element zugreifen muss, um das Bild zu tauschen. Ich wusste nicht wie.

Habe mich daran erinnert, dass man ja auch mit mehreren Übergabewerten arbeiten kann. Der erste Übergabewert entspricht der ID der Liste (control), der zweite Übergabewert entspricht der ID, welche dem Bild zugeordnet ist (picture).

Hier der derzeitige Code:

  
function toggle(control, picture) {  
		  
	var elem = document.getElementById(control);  
	  
	if(elem.style.display == "none") {  
		elem.style.display = "block";  
		document.getElementById(control).activemenu = 1;  
	} else {  
		elem.style.display = "none";  
		document.getElementById(control).activemenu = 0;  
		}  
	var menustatus = document.getElementById(control).activemenu;  
	  
	if(menustatus == 0) {  
		document.getElementById(picture).src="bilder/sitelayout/buttons/js-slide-closed.jpg";  
	} else {  
		document.getElementById(picture).src="bilder/sitelayout/buttons/js-slide-open.jpg";  
		}  
	}  

Klappt wunderbar.

Nun sollte ich das Ausblenden auch noch mit JS lösen, da bei deaktiviertem JavaScript nur die Überschriften angezeigt würden:

  
<ul id="js_operatoren" style="display:none">  

Vielen Dank für Deinen wertvollen Hinweis!

typograph