Hilfe bei JavaScript

[Rolf b]

Hallo Boris Bär,

kann es sein, dass Du beim Basteln doppelten Code produziert hast? Ich finde zwei Stellen, die Click-Handler für next_page und previous_page installieren.

Du solltest deinen Script-Block zunächst einmal kapseln, um den globalen Namensraum freizuhalten. Das gilt mittlerweile als schlechter Stil. Zum Beispiel bietet JQuery die Möglichkeit, einen sogenannten Ready-Handler zu setzen - der wird ausgeführt sobald das HTML der Seite geladen ist und das DOM erzeugt wurde. Das geht so:

$.ready(function() {
   // dein Code
});

Du kannst in dieser Ready-Function nun ebenso Event-Handler installieren. UND du kannst Variablen erzeugen, die nur innerhalb dieser Funktion bekannt sind. Wenn Du darin außerdem noch Event-Handler erzeugst, entsteht eine sogenannte Closure, d.h. die Eventhandler-Funktion merkt sich den Laufzeit-Kontext der übergeordneten Ready-Function und hält deine Variable damit am Leben.

Für das Verständnis des folgenden Codes diese Hinweise:

• Da Du ohnehin schon deine Seiten mit der Klasse letter-text versehen hast, kannst Du relativ leicht deine Seiten zählen (length Eigentschaft des matched set)
• Wenn Du schon jQuery nimmst, solltest Du es auch als Event-Registrar verwenden.
• Du kannst deine Seiten mit jQuery adressieren. Das ist nicht unbedingt schnell, aber da Du nur zwei anfasst, ist das kein Problem.
• Wenn man Code schreibt, in dem sich viele Blöcke sehr ähnlich sehen, schreit das normalerweise "FUNCTION!".

Was jetzt folgt, habe ich im Forum runtergetippt (während Du deine eigene Lösung gepostet hast) und nicht live getestet. Mag also ein paar Dibfeler enthalten. Viel Glück :)

$.ready(function() {
   // Aktuelle Seite ist erstmal unbekannt
   var pageNumber = -1;
   // jQuery matched set für alle Seiten bilden und speichern
   var $pages = $(".letter-text");

   var changePage = function(newPage) {
      // newPage nicht im Bereich -> nichts tun
      if (newPage < 1 || newPage > $pages.length) return;

      // Seite wechseln      
      if (pageNumber > 0)
         $pages.eq(pageNumber-1).hide();
      $pages.eq(newPage-1).fadeIn(600);
      pageNumber = newPage;

      // Navigationselemente updaten
      controlNavigation("previous_page", pageNumber > 1);
      controlNavigation("next_page", pageNumber < $pages.length);
   };
   var controlNavigation = function(id, show) {
      if (show) {
         $("input#"+id).show();
         $("img#"+id+"-disabled").hide();
      } else {
         $("input#"+id).hide();
         $("img#"+id+"-disabled").show();
      }
   };

   // Eventhandler registrieren
   $("#next_page").click(function() { changePage(pageNumber+1); });
   $("#previous_page").click(function() { changePage(pageNumber-1); });

   // Seite 1 aktivieren
   changePage(1);
});

Ich glaube, mehr Code als das hier brauchst Du nicht.

Rolf