jQuery von Kopf bis Fuß (German Edition)

»this« für ein beliebiges DOM-Element, mit dem wir in unserem Code gerade arbeiten wollen. Durch das Hinzufügen von
$()
können wir mit jQuery-Methoden auf dieses DOM-Element zugreifen.

$(this) bei der Arbeit
    Wir wollen sehen, ob
$(this)
uns bei der Lösung unseres Problems behilflich sein kann. Bauen Sie
$(this)
in Ihren Code ein, wie unten fettgedruckt hervorgehoben.
    Tun Sie das hier!

    Probefahrt
    Öffnen Sie die Seite im Browser Ihrer Wahl und überprüfen Sie, ob alles richtig funktioniert. Achten Sie besonders auf die Warnmeldung, um sicherzustellen, dass die Rabattvariable korrekt ist. Klicken Sie mehrere Male, um zu sehen, ob auch die Zufallszahl, die an die Rabattvariable angehängt wird, tut, was wir wollen.

    Gute Frage!
    Sie bringt uns zum letzten Schritt unserer Aufgabenliste:
    Die Seite soll aus vier Abschnitten bestehen. Jeder Abschnitt enthält eines von vier „Freudensprünge“ -Bildern.
Die Abschnitte sollen anklickbar sein.
Wir brauchen eine Nachricht, die lautet: »Ihr Rabatt beträgt«, gefolgt von einem zufälligen Rabatt (zwischen fünf und zehn Prozent).
Wenn ein Besucher auf einen dieser Abschnitte klickt, soll die Nachricht unter dem Foto dieses Abschnitts erscheinen.
Wenn der Benutzer noch einmal klickt, soll die letzte Nachricht verschwinden und eine neue Meldung angezeigt werden.
    Kopf-Nuss
    Was meinen Sie, wie man die letzte Nachricht entfernen kann?

Gutes Gelingen mit remove
    Wie werden wir die letzte Nachricht wieder los? Und wie können wir eine neue erstellen? Klar! Mit der
remove
-Methode. Per
remove
können wir eines oder mehrere Elemente aus der Seite entfernen. Nehmen wir als Beispiel eine einfache Seite mit einer Aufgabenliste und einem Button.
    Links sehen Sie die Browseransicht und rechts den HTML-Code, der die Liste definiert.
Und hier ist der Code für den Button, der sämtliche Listeneinträge entfernt:
Nachdem jQuery seine Arbeit beendet hat, sehen wir uns die Seite und den HTML-Code noch einmal an. Und tatsächlich: Alle Listeneinträge sind verschwunden — sogar im HTML-Code!
    Kopf-Nuss
    Welchen Selektor brauchen Sie, um die Rabattnachricht von der Seite zu entfernen?

Nachkommen-Selektoren für mehr Tiefe
    Die CSS-Nachkommen-Selektoren funktionieren auch in jQuery. Und für unseren Zweck sind sie genau das Richtige. Mit Nachkommen-Selektoren können wir Beziehungen zwischen Elementen angeben. Wir können Kind-, Eltern- und Geschwisterelemente auswählen.

    Spitzen Sie Ihren Bleistift
    Verwenden Sie einen Nachkommen-Selektor, um eine Anweisung zu schreiben, die den letzten Absatz im „Freudensprünge“ -DOM entfernt.
    _______________________________________________
    Spitzen Sie Ihren Bleistift: Lösung
    Beginnen Sie mit dem Klassenselektor für
.ratespiel
, gefolgt von einem Nachkommen-Selektor für
p
-Elemente, um auf den von jQuery hinzugefügten Absatz zuzugreifen. Danach verwenden Sie die
remove
-Methode, um alle
p
-Elemente zu entfernen, die sich innerhalb eines Elements mit der Klasse
.ratespiel
befinden.

    Ja, die Reihenfolge, in der Sie Elemente einfügen oder entfernen, spielt eine wichtige Rolle.
    Sie können ein Element nicht entfernen, bevor Sie es hinzugefügt haben, oder?
    Spitzen Sie Ihren Bleistift
    Sie sollen entscheiden, wo die
remove
-Anweisung hingehört. Schreiben Sie die Anweisung auf die Zeile 1, 2 oder 3. Danach sollten Sie erklären, warum Sie die Anweisung gerade dorthin geschrieben haben. Überlegen Sie, wann der Absatz enternt werden muss. Danach benutzen Sie das Ausschlussverfahren, um den richtigen Platz für die Aufgaben zu finden.

    Warum ich der Meinung bin, dass die Anweisung hierhin gehört:
    ______________________________________________________________
    ______________________________________________________________
    ______________________________________________________________
    ______________________________________________________________
    ______________________________________________________________
    Spitzen Sie Ihren Bleistift: Lösung
    Sie sollen entscheiden, wo die
remove
-Anweisung hingehört. Schreiben Sie die Anweisung auf die Zeile 1, 2 oder 3. Danach sollten Sie erklären, warum Sie die Anweisung gerade dorthin geschrieben haben. Überlegen Sie, wann der Absatz enternt werden muss. Danach benutzen Sie das Ausschlussverfahren, um den richtigen Platz für die Aufgaben zu finden.

    Warum ich der Meinung bin, dass die Anweisung hierhin gehört:
    Aufgepasst
    Die Reihenfolge und das Timing Ihrer jQuery-Aufrufe sind