dynamische variablen?

[henry5]

hallo
folgendes skript ist eine simple diashow welche (onClick) ausgelöst, ein hintergrundbild eines divs wechselt. ich gebe die anzahl bilder an, und nach dem letzten bild beginnts wieder mit dem ersten.

var number=1
function skipImage(Anzahl,IMAGE,Location){
if(number<Anzahl){
number=number+1;}
else{
number=1}
document.getElementById(IMAGE).style.backgroundImage='url('+Location+''+number+'.jpg)'}

mein problem: ich habe nun mehrere solche "diashows" und möchte nur dieses eine javascript verwenden. ich müsste mehrere variablen "number" dynamisch generieren, damit sie sich nicht gegenseitig in die quere kommen... (?)
kann mir jemand auf die sprünge helfen?

thx und gruss
marc

[ChrisB]

Hi,

mein problem: ich habe nun mehrere solche "diashows" und möchte nur dieses eine javascript verwenden. ich müsste mehrere variablen "number" dynamisch generieren, damit sie sich nicht gegenseitig in die quere kommen... (?)

Es *ginge* zwar, sowas wie "variable Variablen" in Javascript zu verwenden - aber in >> 99,9% der Faelle, wo nach soetwas gefragt wird, kann der einzig vernuenftige Ratschlag nur lauten: Verwende Arrays.

Deshalb mein Ratschlag: Verwende Arrays.

MfG ChrisB

[henry5]

Es *ginge* zwar, sowas wie "variable Variablen" in Javascript zu verwenden - aber in >> 99,9% der Faelle, wo nach soetwas gefragt wird, kann der einzig vernuenftige Ratschlag nur lauten: Verwende Arrays.

Deshalb mein Ratschlag: Verwende Arrays.

MfG ChrisB

hi chris
danke für den tip. ich bin eher javascript-novize und habe mich wohl nicht präzise ausgedrückt. kannst du mir noch ein paar anhaltspunkte geben, wie ich das hier konkret mit arrays lösen kann? – wäre super.

mfg
marc

[ChrisB]

Hi,

bitte zitiere sinnvoll, das worauf du dich konkret beziehst, und nicht alles.

danke für den tip. ich bin eher javascript-novize und habe mich wohl nicht präzise ausgedrückt. kannst du mir noch ein paar anhaltspunkte geben, wie ich das hier konkret mit arrays lösen kann?

Beschaeftige dich mit Arrays.
Und dann gib jeweils an der Stelle, wo du dich auf eine bestimmte "Instanz" deiner number-Variable beziehen willst, den entsprechenden nummerischen Index an.
(Die Maximal-Anzahl sollte dann natuerlich auch als Array vorliegen.)

MfG ChrisB

[henry5]

hi
wenn ich das richtig verstehe, müsste ich auf diese weise wissen, wieviele "diashows" es gibt, resp. ich müsste für jede neue "diashow" eine entsprechende instanz definieren?
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...

thx und beste grüsse
henry

[ChrisB]

Hi,

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 muss die Info, wie viele Diashows es gibt/geben soll, ja logischerweise irgendwo anders herkommen - bspw. aus dem HTML-Code des Dokumentes.
Nun, auch diesen kann man durchlaufen, um bestimmte Elemente o.ae. zu finden, die das Auftreten einer Diashow irgendwie "definieren".
Dann muesstest du jetzt aber erst mal festlegen, wie diese "Definition" aussieht.

MfG ChrisB

[molily]

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

[henry5]

hi mathias
tausenddank für deine umfassende erklärung!

ich habe eine lösung gefunden, allerdings kann es gut sein, dass ich was grundlegendes falsch gemacht habe. nun, auf jeden fall funktioniert es wie gewünscht und es werden auch keine fehler ausgegeben... die variablen unterscheiden sich durch die individuelle id "SKIP".

var skipVar=new Array()
function skipImage(Anzahl,IMAGE,Location,SKIP){
if (skipVar[SKIP]==null){
skipVar[SKIP]=1;}
if (skipVar[SKIP]<Anzahl){
skipVar[SKIP]=skipVar[SKIP]+1;
if (skipVar[SKIP]==Anzahl){
document.getElementById(SKIP).style.backgroundImage='url(navigation/skipback.gif)'}}
else{
skipVar[SKIP]=1;
document.getElementById(SKIP).style.backgroundImage='url(navigation/skip.gif)'}
document.getElementById(IMAGE).style.backgroundImage='url('+Location+''+skipVar[SKIP]+'.jpg)';}

lg henry

[Kai345]

[latex]Mae  govannen![/latex]

die variablen unterscheiden sich durch die individuelle id "SKIP".

function skipImage(Anzahl,IMAGE,Location,SKIP){
if (skipVar[SKIP]==null){

document.getElementById(SKIP).style.backgroundImage='url(navigation/skipback.gif)'}}

Das Ganze riecht sehr nach unzulässigen Ids. Ids müssen mit einem Buchstaben beginnen.

Cü,

Kai

[henry5]

Das Ganze riecht sehr nach unzulässigen Ids. Ids müssen mit einem Buchstaben beginnen.

Ids: skip1, skip2, skip3...

greez
henry

[molily]

Hallo,

var skipVar=new Array()

Abgesehen davon, dass das kein wirklicher Array ist, sondern nur ein Object, dem du mit skipVar[SKIP] Eigenschaften zuweist, ist das so möglich.

Siehe auch
http://de.selfhtml.org/javascript/objekte/array.htm#assoziative_arrays

Mathias