Joskus, jos haluat aloittaa matkan oppimaan jotain valtavaa ja monimutkaista, sinun on opittava jotain pientä ja yksinkertaista. JavaScript on valtava ja monimutkainen, mutta voit vauva astua siihen oppimalla pieniä ja yksinkertaisia asioita. Jos olet web-suunnittelija, mielestäni on yksi asia, jonka voit oppia ja joka on erittäin voimaannuttava.
Haluan sinun oppivan tämän: Kun napsautat jotakin elementtiä, vaihda luokan joillekin elementeille.
Kuvittele, että se on ehdottoman välttämätöntä, kuvittele, että meillä on painike ja div:
Click Me I'm an element Div: llä voi olla joitain perustyylejä ja sillä voi olla joitain tyylejä, kun sillä on tietty luokka:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Älykkäät CSS-Tricksters saattavat tunnustaa tämän mahdollisuuden valintaruutujen hakkerointiin, mutta emme tee sitä tänään.
Haluamme liittää painikkeeseen "tapahtumakuuntelijan": vähän koodia, jotta voit "kuunnella" tapauksemme napsautuksia ja suorittaa lisää koodia.
Tiedätkö, kuinka CSS: ssä meidän on "valittava" elementtejä niiden muotoilemiseksi? Meidän on tehtävä se myös JavaScriptissä, jotta voimme liittää tapahtumakuuntelijamme. Luomme painikkeelle viittauksen muuttujana seuraavasti:
var button = document.querySelector("button");Nyt kun meillä on viittaus painikkeeseen, liitämme tapahtuman kuuntelijan:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));Ja mitä haluamme tehdä napsautuksen yhteydessä? Lisää luokan nimi diviin! Mutta aivan kuten tarvitsimme viitteitä painikkeelle, jotta voimme tehdä asioita sen kanssa, tarvitsemme viitteen myös div: lle. Tehdään ne molemmat samanaikaisesti, tässä on koko koodibitti:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Se on koko asia, jonka halusin näyttää sinulle. Jotkut CSS lisätään "yay" luokkaan, voimme hiipua sisään ja ulos div:
Katso Chris Coyierin (@chriscoyier) kynän napsautus Jotain / Vaihda luokkaa CodePenissä.
Miksi tämä yksi asia?
Suunnittelumahdollisuudet ovat rajattomat, kun ohjaat CSS: ää ja minkä tahansa elementin tilaa (minkä luokan nimet sillä on). Asioiden piilottaminen ja paljastaminen on ilmeinen voima, mutta se voi todella olla mitä tahansa.
Tasoitus ylös
Muista, että et ole rajoittunut yhden luokan nimen vaihtamiseen. Voit muuttaa useita luokkia yhdellä elementillä tai muuttaa luokkia useilla elementeillä.
Katso lisää classList-ominaisuudesta. Toggle ei ole ainoa vaihtoehto.
Aivan kuten HTML ja CSS, JavaScriptillä on eri tasoinen selaintuki asioille. Etsi classList-selaintuki ja lisää addEventListener. Oletko kunnossa projektisi tuen kanssa? Jos ei, voit tutkia polyfills tai jopa jQuery.
Käytimme "click" -tapahtumaa, mutta on paljon muita. Muut hiirtapahtumat, vieritys, näppäimistö ja paljon muuta. Monta sataa.
Menetelmä, jota käytimme valitsemiseen oli document.querySelector. Tämä oli hyödyllistä, koska se palauttaa yhden elementin, jonka kanssa voimme työskennellä. Lisäksi valitsemasi valitsimet ovat kuin CSS-valitsimet. document.querySelector("#overlay .modal > h2");olisi laillinen valinta. Tämä ei kuitenkaan ole ainoa tapa valita, on muitakin, kuten getElementById, querySelectorAll, getElementsByClassName ja paljon muuta.
Tässä on esimerkki siitä, missä valitsemme joukon navigointikohteita ja kiinnitämme napsautusten käsittelijän kaikkiin kerralla:
Katso Chris Coyierin (@chriscoyier) kynänvaihtoluokitukset CodePenistä.
Jos pieneen esimerkkiin kirjoittamamme JavaScript ei latautunut jostain syystä, meillä on silti painike, joka sanoo "Click Me". Mutta napsauttaminen ei tekisi mitään helvettiä, eikö niin? Ehkä voisimme lisätä kyseisen painikkeen JavaScriptillä, joten painiketta ei ole edes siellä, ellet tiedä, että se toimii? Hyvä idea, eikö? ;)