For schleife Jquery

[heinzi]

HI zusammen,
ich habe relativ viele Anweiseungen, die vom prinzip her völlig gleich sind und  nur durch eine Variable die ID erhöhen.
Das Ganze will ich natürlich vom Quelltext her minimieren.
Daher habe ich eine For-schleife gebastelt.
Irgendwie funzt das aber nicht.Was mache ich falsch:

for (i = 2; i <= 10; i++)
 $('#test'+i).toggle(
    function(){
  $('#ziel'+i).css({"background-image":"url(foto.gif)"});
  },
    function(){
  $('#ziel'+i).css({"background-image":"url(/foto.gif)"});
  }
 );

danke für Hilfe

heinz

[molily]

Das Problem sind Closures in Schleifen (zu den Stichwörtern findest du im Forumsarchiv einiges). D.h. in der Schleife notierst du Funktionen, die den Schleifenzähler i einschließen. Wenn die Funktionen aufgerufen haben, ist der Wert von i jedoch der des letzten Schleifendurchlaufs (10). Es gibt verschiedene Möglichkeiten, der Handler-Funktion das passende i zur Verfügung zu stellen. Du kannst z.B. eine weitere Funktion verwenden, die mit jedem Schleifendurchlauf ausgeführt wird und die den Schleifenzähler übergeben bekommt:

for (i = 2; i <= 10; i++) (function (i) {
  $('#test'+i).toggle(function () {
    $('#ziel'+i).css({"background-image":"url(foto.gif)"});
  }, function () {
    $('#ziel'+i).css({"background-image":"url(/foto.gif)"});
  });
})(i);

So schließen die Closures immer den richtigen i-Wert ein.

Mathias

[heinzi]

jau danke.
das passt.
die Closures waren mir so nicht bekannt.

gruß heinzi

[molily]

die Closures waren mir so nicht bekannt.

Hier nachzulesen:
http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#closures

Mathias

[Tim Tepaße]

Hallo Mathias, Heinz,

Kurze Zwischenfrage:

for (i = 2; i <= 10; i++)
    $('#test'+i).toggle(

for (i = 2; i <= 10; i++) (function (i) {

Ich sehe neuerdings öfters in JS die Nutzung Block-loser Statements bei Schleifen. Zugegeben, aneinandergekettete JQuery-Ausdrücke ist immer ein Statement in sich, aber irritiert euch das Fehlen von { ...} nicht, rein auf visueller Ebene? Mich wirft es immer auf der Bahn und das, obwohl ich von Python und Haskell Gruppierung nur durch Einrückung gewöhnt bin. Bei von C syntaktisch abstammenden Sprachen wirft es jedoch immer mentale rote Tatütatas auf.

Tim

[molily]

So ein Fall ist einer der wenigen, in dem ich keinen Block bei for setzen würde. Das ist aber nur eine Frage der Übersichtlichkeit und Kürze und hat für mich weniger mit for, als mit Function-Expression zu tun. Aus dem Grund habe ich den Heinz Code auch insofern angepasst, dass die Function-Expressions nicht eingerückt werden, sondern nur ihr Inhalt. Bei jQuery schreibt man ständig $().func(function () {}), im Falle von toggle könnte ich jetzt ausführlich schreiben:

for () {
   (function () {
      $().toggle(
         function () {
            ...
         },
         function () {
            ...
         }
      );
   }(i);
}

Damit wäre für Einsteiger noch am ehesten klar, was da notiert wird. Aber wenn man das ausführliche Schema durchhält, wird funktionaler Code unglaublich raumgreifend. Deshalb habe ich das »function () {« jeweils hochgezogen in die Zeile davor. Wirkt dann viel kompakter und ist für jQuery-Kenner immer noch zu verstehen, weil dort Function-Expressions und Closures zum Handwerkszeug gehören. Den Block nach for sehe ich dann als überflüssig und störend an. Und wenn man mit Closures und Schleifen arbeitet, sollte man das Schema for () (function {})(); beherrschen und auch in fremdem Code in der Kurzschreibweise sofort erkennen.

Mathias