Über ein Event, Attribute von zwei Objekten ändern

[creativemess]

Hallo zusammen,
Ich suche eine möglichkeit über ein onclick event auf der Überschrift h3 den pfad des dazugehörigen Bildes und die klasse des dazugehörigen divs zu ändern.

  
<h3>Bestand<img src="bilder/icontexto-webdev-add.ico" /></h3>  
<div class="close">  
     <?php  
     // ...  
     ?>  
</div>  
				  
<h3>Ausgeliehen nach Datum<img src="bilder/icontexto-webdev-add.ico" /></h3>  
<div class="close">  
     <?php  
     // ...  
     ?>  
</div>  

Viellen Dank für eure Hilfe

[Gunnar Bittersmann]

@@creativemess:

Ich suche eine möglichkeit über ein onclick event auf der Überschrift h3

Dieses wird das aktuelle Objekt 'this' sein.

den pfad des dazugehörigen Bildes

Dieses ist innerhalb des aktuellen Objekts: this.getElementByTagName("img").

und die klasse des dazugehörigen divs zu ändern.

Dies ist der nächste Geschwisterknoten: this.nextSibling.

Wie du die Werte der 'src'- und 'class'-Attribute änderst, weißt du?

Live long and prosper,
Gunnar

[Felix Riesterer]

Lieber Gunnar,

da ist Dir ein flüchtender Fehler unterlaufen...

| den pfad des dazugehörigen Bildes

Dieses ist innerhalb des aktuellen Objekts: this.getElementByTagName("img").

Es existiert im Normalfall (ohne irgendwelche prototypischen Erweiterungen) keine Methode "getElementByTagName", sondern "getElementsByTagName" (Plural!), sodass Dein Tipp lauten müsste:

Dieses ist innerhalb des aktuellen Objekts: this.getElementsByTagName("img")[0].

| und die klasse des dazugehörigen divs zu ändern.

Dies ist der nächste Geschwisterknoten: this.nextSibling.

Je nach Browser und Quellcode könnte das nicht immer wie angenommen funktionieren, da irgendwelche Textnodes (eine Gruppe von Whitespaces) als weitere Geschwisterknoten dazwischenliegen könnten. Daher müsste man die Geschwisterknoten der Reihe nach durchiterieren, um jedesmal zu prüfen, og es sich um ein DIV handelt, oder nicht, um dann beim erstbesten gefundenen DIV abzubrechen.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

Plural!

Grmpf.

[0]

Grmpf.

da irgendwelche Textnodes (eine Gruppe von Whitespaces) als weitere Geschwisterknoten dazwischenliegen könnten

Grmpf.

Live long and prosper,
Gunnar

[creativemess]

Der Zugriff auf die Elemente funktioniert jetzt :)
Danke
Hab aber gleich das nächste Problem:
Ich will das sich bei einem zweiten klick die ganzen Elemente wieder zurücksetzen usw...
Ich hab das mit einer If - Else Abfrage versucht leider verändert dass den Status nur beim ersten klick, nachher passiert nichts mehr.

  
<script type="text/javascript">  
	function co(thus){  
		if (thus.getElementsByTagName("img")[0].src = "bilder/icontexto-webdev-add.ico"){  
			thus.getElementsByTagName("img")[0].src = "bilder/icontexto-webdev-remove.ico";  
			thus.nextSibling.className = "open";  
		}else{  
			thus.getElementsByTagName("img")[0].src = "bilder/icontexto-webdev-add.ico";  
			thus.nextSibling.className = "close";  
		}  
	}  
</script>  
<div id="Tabelle">  
	<h3 onclick="co(this);">Bestand<img src="bilder/icontexto-webdev-add.ico" /></h3><div class="close">  
		<?php  
		// ...  
		?>  
</div>  

[Felix Riesterer]

Lieber creativemess,

Der Zugriff auf die Elemente funktioniert jetzt :)

hast Du das auch brav in FF, IE(6&7) und in Opera getestet...?

Ich will das sich bei einem zweiten klick die ganzen Elemente wieder zurücksetzen usw...

Dann baue Deine Funktion so um, dass sie sich zuerst informiert, welches Icon überhaupt angezeigt wird, um dann entsprechend zu verfahren.

Im Großen und Ganzen solltest Du Dir das aber viel einfacher machen, indem Du Dein Markup sinnvoller gestaltest:

<div class="container open">  
    <h3>Bestand</h3>  
    <div>  
         <?php  
             // ...  
         ?>  
    </div>  
</div>  
  
<div class="container open">  
    <h3>Ausgeliehen nach Datum</h3>  
    <div>  
         <?php  
             // ...  
         ?>  
    </div>  
</div>

Ich bin mir jetzt nicht sicher, ob es das verschachtelte <div> wirklich braucht. Eventuell möchtest Du an dieser Stelle lieber etwas sinnbehafteteres benutzen (<dl> oder <p>?).

Mittels JavaScript kannst Du nach dem Laden der Seite ermitteln, welche <div>-Elemente eine Klasse "container" haben, um diesen dann dynamisch einen Eventhandler zuzuweisen. Anschließend kann dann dieser Eventhandler eine zweite Klasse "open" vergeben (oder bei Vorhandensein wieder entfernen).

Mittels CSS steuerst Du das Hintergrundbild der enthaltenen <h3>-Elemente, sowie die Anzeige des enthaltenen <div>-Elements.

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo creativemess,

  if (thus.getElementsByTagName("img")[0].src = "bilder/icontexto-webdev-add.ico"){  

du kennst den Unterschied zwischen Zuweisung (=) und Vergleich (==)?

Gruß, Jürgen

[ChrisB]

Hi,

  if (thus.getElementsByTagName("img")[0].src = "bilder/icontexto-webdev-add.ico"){  

du kennst den Unterschied zwischen Zuweisung (=) und Vergleich (==)?

Selbst wenn das erst mal berücksichtigt ist, würde ich nicht unbedingt davon ausgehen, dass alle Browser auch genau das bei der Abfrage des Inhaltes von src zurückliefern, was vorher reingeschrieben wurde - beim href-Attribut von Links ist es jedenfalls so, dass sie teilweise vollständige URLs liefern, selbst wenn zuvor nur ein relativer Pfadbestandteil zugewiesen wurde, oder sonstige Abweichungen zeigen.
Ich würde eher den aktuellen Status in einem Flag speichern, das erscheint mir verlässlicher.

MfG ChrisB

[JürgenB]

Hallo ChrisB,

Ich würde eher den aktuellen Status in einem Flag speichern, das erscheint mir verlässlicher.

das würde ich auch so machen. Ich wollte auch nur auf diesen oft gemachten Fehler hinweisen.

Gruß, Jürgen