jQuery von Kopf bis Fuß (German Edition)

Wert
false
zurückgeben.
F:
F: Was ist eine statische jQuery-Methode?
A:
A: Im Gegensatz zu einem bestimmten Objekt gehört diese Methode direkt zur jQuery-Bibliothek. Um diese Methode aufzurufen, wird kein Selektor gebraucht, sondern nur der Name jQuery bzw. das Kürzel (
$
).
F:
F: Was machen
index
und
value
in unserer
.each
-Handler-Funktion?
A:
A: Das Schlüsselwort
index
sagt uns, wo in der Schleife wir uns gerade befinden, Hierbei hat das erste Array-Element für den betreffenden Selektor den Wert 0. Der Wert bezieht sich auf das gegenwärtige Objekt. Es ist das gleiche wie
$(this)
in der
.each
-Schleife.
F:
F: Warum enthält die
.each
-Schleife in der Funktion
code_verstecken
die Anweisung
return false
?
A:
A: Durch den Rückgabewert
false
in einer
.each
-Schleife weist sie den JavaScript-Interpreter an, aus der Schleife herauszuspringen und mit dem folgenden Code weiterzumachen. Ist der Wert nicht
false
, wird die Schleife mit dem nächsten Element im Array erneut ausgeführt.
    Kopf-Nuss
    Können Sie sich vorstellen, auf welche Weise wir dem Besucher mitteilen können, auf welchem Feld er sich befindet, bevor er es anklickt?

Methoden zum Ändern von CSS
    Um unsere Lösung zu vervollständigen, müssen wir das Feld hervorheben, über dem sich der Cursor gerade befindet, bevor es angeklickt wird. Die einfachste Möglichkeit, das Aussehen eines Elements zu ändern, ist per CSS.
    Glücklicherweise besitzt jQuery einige recht leicht zu benutzende Methoden , um Elemente mit CSS-Klassen zu versehen und diese wieder zu entfernen. Wir wollen sehen, wie wir das in unsere Lösung einbauen können.
    Anmerkung
    Kommt Ihnen das aus den Kapitel 1 und Kapitel 2 bekannt vor?
    Code-Fertiggericht
    Erstellen Sie diese neuen Dateien unabhängig von unserem »Freudensprünge«-Projekt, um die Methoden in Aktion beobachten zu können. Das soll Ihnen dabei helfen, herauszubekommen, wie Sie ein Feld hervorheben können, bevor der Besucher darauf klickt.
    Probefahrt
    Öffnen Sie die neu erstellte Datei klassen_test.html in Ihrem Browser. Nach dem Anklicken des Hinzufügen-Buttons wird dem div-Element mit der ID
kopfteil
die Klasse
hover
zugewiesen. Klicken Sie auf den Entfernen-Button, wird die Klasse wieder gelöscht.

    Auch woanders. Und das geht genauso einfach ...
    Sie können den CSS-Code für jedes beliebige Element verändern. Allerdings brauchen Sie für diese Lösung noch ein anderes Event, damit alles wie gewünscht funktioniert. Sehen Sie sich noch einmal die Liste in „Events auslösen“ an, und versuchen Sie herauszufinden, welches Event Sie benutzen müssen.

Ein hover-Event hinzufügen
    Das
hover
-Event kann als Parameter zwei Handler-Funktionen übernehmen: eine für das
mouseenter
-Event und eine für das
mouseleave
-Event. Diese Handler-Funktionen können benannte oder anonyme Funktionen sein. Sehen Sie sich noch einmal das Testskript an, das Sie zum Testen des
hover
-Events benutzt haben, um ein Element mit Verhalten zu versehen, wenn sich der Cursor darüber befindet.

    Übung
    Aktualisieren Sie die Dateien meine_stile.css und meine_scripts.js , so dass die Felder mit den Bildern hervorgehoben werden, wenn sich der Mauszeiger darüber befindet. Sie brauchen eine neue CSS-Klasse, die bei Bedarf zugewiesen wird, und zwei Handler-Funktionen in Ihrer Skriptdatei (nach der Funktion
checkForCode
), die die Methoden
addClass
und
removeClass
benutzen, um die CSS-Klasse bei Bedarf zuzuweisen und wieder zu entfernen. Den Anfang haben wir für Sie bereits gemacht. Sie brauchen nur noch die Funktionen zu schreiben.
    Lösung zur Übung
    Jetzt haben Sie eine CSS-Klasse, die Sie über das
hover
-Event verändern können.
    Probefahrt
    Öffnen Sie die Datei index.html in Ihrem Browser, in die Ihre neue meine_scripts.js -Datei eingebunden sein sollte. Bewegen Sie die Maus über die Bilder und testen Sie, ob sich der Rahmen ändert.

    Anmerkung
    Hmm. Die Rahmenfarbe ändert sich, aber es gibt immer noch etwas zu tun ...

Sie haben es fast geschafft ...
    Es geht auf jeden Fall gut voran, aber die Nachricht erscheint noch an der falschen Stelle und sieht auch noch nicht so aus wie gewünscht. Zudem gibt es noch eine Anforderung aus der ersten E-Mail, mit der wir uns noch nicht beschäftigt haben. Hier der aktuelle Stand der Anforderungsliste:
    Das Feld, über dem sich der Cursor befindet, soll hervorgehoben werden, bevor der Besucher es anklickt. Auf diese Weise sollen die Besucher wissen, welche Option sie wählen.
Der Rabattcode