collapse swap

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/collapse_swap_199662/page_1 - zur Vollversion wechseln!

hynk schrieb am 16.09.2008 um 16:03

grüssi

ich hab hier eine kleine js funktion, bei ders leider ein problem gibt. auf http://claudiabeer.tendo.at/ gibts links die sterne die bei klick ein dann rechts ein image anzeigen. klarerweise werden zwei oder mehr bilder angezeigt wenn auf mehrere sterne geklickt wird. die frage ist, wie kann ich alle pics collapsen lassen, wenn ich ein neues anzeigen will.

Code: PHP

function swap_extension(swap) {  	
displayType = (document.getElementById(swap).style.display == 'none') ? 'block' : 'none';  	
document.getElementById(swap).style.display = displayType;  }

kenn mich leider in js nüsse aus und würd mich über jede hilfe freuen.

tia
hynk

mat schrieb am 17.09.2008 um 23:55

"Collapse" ist wahrscheinlich das falsche Wort. Du meinst einfach wieder verschwinden lassen, oder?

Am einfachsten machst du einfach eine for-Schleife von 1-Anzahl der Bilder und bastelst den Namen des Bildes selber zusammen und machst dann ein: document.getElementById('bild' + i).style.display = 'none'

Es gibt natürlich 100 schönere Varianten, die um einiges allgemeiner und damit HTML-seitig flexiber sein können.

hynk schrieb am 18.09.2008 um 00:22

würd ich auch nur ein wort verstehn wär mir damit geholfen (i know, klingt aggressiv und dämlich
ich hab leider wirklich null ahnung von der materie, also wärs ein bisschen detailierter schön.
falls wer mal kurz per icq/skype oder wwi zeit haben sollte wär ich dankbar für jede hilfe (biederndorfer schatzi eingeschlossen)

@collapse
war mir klar, wusste nur nicht wie ich es verständlicher formulieren soll.

sensei schrieb am 18.09.2008 um 08:05

hmm ich versuchs mal

Eine Möglichkeit wäre: du gibst deinen images im html code z.b. immer den gleichen Klassennamen oder Namen je nach Wunsch(den (Klassen)namen dann im weiteren html nicht mehr verwenden sonst lässt er diese Objekte auch verschwinden)
z.b.
<img src="image1.gif" class="fasel" alt=".." />
<img src="image2.gif" class="fasel" alt=".." />

den JS Code erweiterst du um :

Code: PHP

function swap_extension(swap) {      

var allImages = document.getElementsByClassName('fasel');
for(i=0; i<allImages.length; i++ ) {
  allImages[i].style.display = 'none';
}

displayType = (document.getElementById(swap).style.display == 'none') ? 'block' : 'none';      
document.getElementById(swap).style.display = displayType;  }

sollt funktionieren hoff ich

hth

edit: upsi "length" statt "lenght" natürlich

danke bodom

hynk schrieb am 18.09.2008 um 08:11

perfekt, danke. werds ausprobiern sobald ich zuhause bin.
seh ich das richtig, dass das skript einfach alle bilder mit einer länge größer als i auf display:none setzt?
nur damit ich das auch richtig versteh. ist ja immer gut zu wissen, was da eigentlich abläuft.

nochmal vielen dank

sensei schrieb am 18.09.2008 um 08:22

Zitat von hynk
perfekt, danke. werds ausprobiern sobald ich zuhause bin.
seh ich das richtig, dass das skript einfach alle bilder mit einer länge größer als i auf display:none setzt?
nur damit ich das auch richtig versteh. ist ja immer gut zu wissen, was da eigentlich abläuft.

nochmal vielen dank

nein das script (sollte es funktionieren) lässt alle bilder bzw. objekte mit class="fasel" verschwinden d.h. es werden zuerst alle Bilder ausgeblendet und dann das zum Stern passende eingeblendet

mit getElementsByClassName holst du dir alle Objekte mit diesem Klassennamen, die werden dann durchiteriert und "versteckt"

hynk schrieb am 18.09.2008 um 08:49

verstehe. danke nochmal