molily: dynamische variablen?

Beitrag lesen

Hallo,

ich suche eine lösung, bei der ich in zukunft auf simple art eine weitere "diashow" einfügen kann, ohne dabei die js. datei zu verändern...

Dann arbeitest du am besten objektorientiert und erstellst Diashow-Objekte.

Beim onload wird eine Initialisierungsfunktion gestartet, die im Dokument nach gewissen Elementen sucht, z.B. die, die eine gewisse Klasse besitzen (Stichwort getElementsByClassName).

Für jede gefundene Diashow erzeugst du eine Instanz des Diashow-Objektes. Der Konstruktor könnte so aussehen:

function Diashow (element) {  
   // mach was mit element  
   // Zugriff auf die Instanz über this  
   this.element = element;  
   this.number = 0;  
   this.anzahl = 10;  
   this.location = "/bilder/";  
}

Das Objekt muss wahrscheinlich verschiedene Eigenschaften haben, mit denen du das Objekt initialisierst bzw. die im Laufe gebraucht werden. Ich habe da einfach mal einige gesetzt.

Dann gibts es ggf. einen globalen Array, in dem all diese Objekte drinstehen:

var diashows = new Array();

Wenn du die Instanz erzeugst, speicherst du sie darin:

var diashow = new Diashow();
diashows.push(diashow);

und kannst später mit diashows[2] auf die dritte Diashow zugreifen. (Weiß aber nicht, ob das so nötig sein wird.)

Methoden kannst du so an das Objekt hängen:

Diashow.prototype.skipImage = function () {  
   if (this.number < this.anzahl) {  
      this.number++;  
   } else {  
      this.number = 1;  
   }  
   this.element.style.backgroundImage = 'url(' +  
      this.location + this.number + '.jpg)';  
};

Mit this greifst du darin auf das Instanzobjekt zu, dort wird numbergespeichert.

Aufruf über

diashow.skipImage();

(Wobei diashow natürlich nur in der Funktion, die die Diashow-Objekte erzeugt, auf ein bestimmtes Objekt zeigt.)

skipImage kannst du natürlich irgendeinem Element als Event-Handler zuweisen, musst dann allerdings einiges beachten und solltest die dortige Funktion bindAsEventListener einbinden. Z.B. in der besagten Konstruktorfunktion kannst du die Handler so zuweisen:

irgendeinElement.onclick = this.skipImage.bindAsEventListener(this);

So hat skipImage dann über this Zugriff auf die Instanz.

Das mag jetzt alles viel auf einmal sein, aber du hast eine komplizierte Aufgabe, die man so ziemlich übersichtlich lösen kann. Frage einfach nochmal nach, wenn du weitergekommen bist und dir etwas unklar ist.

Mathias