Μερικές φορές, για να ξεκινήσετε ένα ταξίδι για να μάθετε κάτι τεράστιο και περίπλοκο, πρέπει να μάθετε κάτι μικρό και απλό. Το JavaScript είναι τεράστιο και περίπλοκο, αλλά μπορείτε να μπείτε σε αυτό μαθαίνοντας μικρά και απλά πράγματα. Εάν είστε σχεδιαστής ιστοσελίδων, νομίζω ότι υπάρχει ένα πράγμα που μπορείτε να μάθετε ότι είναι εξαιρετικά δυνατό.
Αυτό είναι το πράγμα που θέλω να μάθετε: Όταν κάνετε κλικ σε κάποιο στοιχείο, αλλάξτε μια τάξη σε κάποιο στοιχείο.
Βράζοντας αυτό στα απόλυτα απαραίτητα, φανταστείτε ότι έχουμε ένα κουμπί και ένα div:
Click Me I'm an element Το div μπορεί να έχει κάποια βασικά στυλ και μπορεί να έχει κάποια στυλ όταν έχει μια συγκεκριμένη κατηγορία:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Το Astute CSS-Tricksters μπορεί να το αναγνωρίσει αυτό ως ευκαιρία για το hack του πλαισίου ελέγχου, αλλά αυτό δεν είναι αυτό που εργαζόμαστε σήμερα.
Θέλουμε να επισυνάψουμε έναν "ακροατή συμβάντων" στο κουμπί: λίγο κώδικα για "ακρόαση" για, στην περίπτωσή μας, κάντε κλικ σε συμβάντα και όταν συμβεί αυτό, εκτελέστε περισσότερο κώδικα.
Ξέρετε πώς στο CSS πρέπει να «επιλέξουμε» στοιχεία για να τα διαμορφώσουμε; Πρέπει να το κάνουμε και σε JavaScript για να επισυνάψουμε τον ακροατή μας. Θα δημιουργήσουμε μια «αναφορά» στο κουμπί, ως μεταβλητή, ως εξής:
var button = document.querySelector("button");Τώρα που έχουμε μια αναφορά στο κουμπί, θα επισυνάψουμε αυτόν τον ακροατή συμβάντων:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Και τι θέλουμε να κάνουμε σε περίπτωση κλικ; Προσθέστε ένα όνομα τάξης στο div μας! Αλλά όπως χρειαζόμασταν μια αναφορά για το κουμπί για να κάνουμε πράγματα με αυτό, θα χρειαστούμε επίσης μια αναφορά για το div. Ας τα κάνουμε και τα δύο ταυτόχρονα, εδώ είναι ολόκληρο το κομμάτι του κώδικα:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Αυτό ήταν όλο που ήθελα να σας δείξω. Με την προσθήκη κάποιου CSS σε αυτήν την κατηγορία "yay", μπορούμε να ξεθωριάσουμε μέσα και έξω το div:
Δείτε το Pen Click Something / Change Class από τον Chris Coyier (@chriscoyier) στο CodePen.
Γιατί αυτό το πράγμα;
Οι δυνατότητες σχεδιασμού είναι ατελείωτες όταν ελέγχετε το CSS και την κατάσταση οποιουδήποτε στοιχείου (ποια ονόματα κλάσης έχει). Η απόκρυψη και η αποκάλυψη των πραγμάτων είναι η προφανής δύναμη, αλλά θα μπορούσε πραγματικά να είναι οτιδήποτε.
Ανεβαίνοντας
Να θυμάστε ότι δεν περιορίζεστε στην αλλαγή ενός ονόματος τάξης. Θα μπορούσατε να αλλάξετε πολλές κλάσεις σε ένα στοιχείο ή να αλλάξετε τις κλάσεις σε πολλά στοιχεία.
Δείτε την ιδιότητα classList περισσότερα. Το "Toggle" δεν είναι η μόνη επιλογή.
Ακριβώς όπως το HTML και το CSS, το JavaScript έχει διαφορετικά επίπεδα υποστήριξης του προγράμματος περιήγησης για τα πράγματα. Εξετάστε την υποστήριξη του προγράμματος περιήγησης για το classList και προσθέστε το addEventListener. Είστε εντάξει με αυτά τα επίπεδα υποστήριξης για το έργο σας; Εάν όχι, θα μπορούσατε να εξετάσετε polyfills ή ακόμα και jQuery.
Χρησιμοποιήσαμε το συμβάν "κλικ", αλλά υπάρχουν πολλά άλλα. Άλλα συμβάντα ποντικιού, κύλιση, πληκτρολόγιο και άλλα. Πολλές εκατοντάδες.
Η μέθοδος που χρησιμοποιήσαμε για την επιλογή ήταν document.querySelector. Αυτό ήταν χρήσιμο επειδή επιστρέφει ένα μόνο στοιχείο για το οποίο μπορούμε να συνεργαστούμε. Επιπλέον, οι επιλογείς που το δίνετε είναι ακριβώς όπως οι επιλογείς CSS. document.querySelector("#overlay .modal > h2");θα ήταν μια νόμιμη επιλογή. Αυτή δεν είναι η μόνη μέθοδος για την επιλογή, ωστόσο, υπάρχουν και άλλοι όπως getElementById, querySelectorAll, getElementsByClassName και άλλα.
Ακολουθεί ένα παράδειγμα όπου επιλέγουμε μια δέσμη στοιχείων πλοήγησης και επισυνάπτουμε ένα πρόγραμμα χειρισμού κλικ σε όλα αυτά ταυτόχρονα:
Δείτε τις τάξεις Pen Change on Stuff του Chris Coyier (@chriscoyier) στο CodePen.
Εάν η JavaScript που γράψαμε στο μικρό μας παράδειγμα δεν μπόρεσε να φορτώσει για οποιονδήποτε λόγο, θα είχαμε ακόμα ένα κουμπί που θα λέει "Click Me". Αλλά κάνοντας κλικ σε αυτό δεν θα έκανε πολλά, έτσι; Ίσως θα μπορούσαμε να εισαγάγουμε αυτό το κουμπί με JavaScript, οπότε το κουμπί δεν είναι καν εκεί, εκτός αν γνωρίζουμε ότι θα λειτουργήσει; Καλή ιδέα, ε; ;)