funktionen in einer schleife erstellen

[brust]

Hallo zusammen,

ich habe eine variable anzahl von div's mit einer ID und versuche für diese ID's javascript funktionen zu erstellen...

beispiel

  
  
for( var i=0;i<10;i++){  
   var test = document.getElementById('xbegleitperson' + i.toString() );  
   if (  test != null ){  
       test.addEvent('click', function(e){  
           alert( i )  
  
        });  
    }  
}  
  

das ergebnis von i ist immer 10.

Hat von euch jemand eine Idee wie ich diese variable so speichern kann das sie in xbegleitperson1 1
xbegleitperson2 2 usw. ist

Danke für jede Idee

[brust]

hab noch was vergessen, wenn man die Variable i in eine neue variable speichert wir auch immer 10 ausgegeben. es sieht so aus als ob die Speicheradresse immer die gleich ist...

  
var test2 = i;  
alert( test2 );  

[Joachim]

Hi,

var test = document.getElementById('xbegleitperson' + i.toString() );

^^^^^^^^^^^
Das ist Quark.

Klassischerweise in einem array:
var el, i, xbegleiter =  [];
for(i = 0; i < 10; i++) {
    el =  document.getElementById('xbegleitperson' + i );
    el.onclick = function(e){
        // ...
    }
    xbegleiter.push(el);
}

Gruesse, Joachim

[molily]

ich habe eine variable anzahl von div's mit einer ID und versuche für diese ID's javascript funktionen zu erstellen...

Diese sind Closures und haben Zugriff auf den Variablen-Gültigkeitsbereich (Scope) der äußeren Funktion (siehe Scope-Chain). Die Variable i hat nach deren Ablauf den Wert 10, also haben bekommen alle verschachtelten Funktionen den Wert 10, wenn sie darauf zugreifen.

Das kannst du auf verschiedene Arten umgehen.

1. Für jedes Element eine individuelle Handlerfunktion erzeugen, die als Closure eine Variable einschließt, die sich nicht mehr ändert:

function makeHandler (i) {  
  return function handler () {  
    alert(i)  
  };  
}  
  
for (var i = 0, el; i < 10; i++) {  
  el = document.getElementById('xbegleitperson' + i);  
  if (!el) continue;  
  test.addEventListener('click', makeHandler(i), false);  
}

Das sollte man aber aus Performancegründen nicht tun, wenn es um viele Elemente geht, siehe Performance von JavaScript-Closures.

2. Die Zahl im Handler aus dem id-Attribut lesen:

var prefix = 'xbegleitperson';  
  
function handler () {  
  var i = Number(this.id.substring(prefix.length));  
  alert(i);  
}  
  
for (var i = 0, el; i < 10; i++) {  
  el = document.getElementById(prefix + i);  
  if (!el) continue;  
  test.addEventListener('click', handler, false);  
}

Dafür bietet sich zudem Event-Delegation, also das Überwachen sämtlicher Klicks an zentraler Stelle:

var prefix = 'xbegleitperson';  
  
document.addEventListener('click', handleBegleitperson, false);  
  
function handleBegleitperson (e) {  
  var id = this.id;  
  if (id.substring(0, prefix.length) != prefix) return;  
  var i = Number(id.substring(prefix.length));  
  alert(i);  
}

Damit spart man sich die Schleife komplett.

Der obige Beispielcode ist nicht getestet.

Mathias

[brust]

danke ich werde das montag morgen gleich mal ausprobieren.