Včasih se morate za začetek potovanja v nekaj velikega in zapletenega naučiti nekaj majhnega in preprostega. JavaScript je ogromen in zapleten, vendar lahko vanj stopite z učenjem majhnih in preprostih stvari. Če ste spletni oblikovalec, mislim, da se lahko naučite še ene stvari, ki je izjemno opolnomočna.
To je stvar, ki jo želim, da se naučiš: ko klikneš neki element, spremeniš razred nekega elementa.
Če to znesemo na absolutno bistveno, si predstavljamo, da imamo gumb in div:
Click Me I'm an element Div ima lahko nekaj osnovnih stilov in ima lahko nekatere sloge, če ima določen razred:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Preudarni CSS-prevaranti bi to morda prepoznali kot priložnost za vdor v potrditveno polje, vendar danes na tem ne delamo.
Na gumb želimo pritrditi »poslušalca dogodkov«: malo kode, ki jo lahko »poslušamo«, v našem primeru kliknite dogodke in ko se to zgodi, zaženite več kode.
Veste, kako moramo v CSS "izbrati" elemente, da jih lahko oblikujemo? To moramo storiti tudi v JavaScript, da priložimo poslušalca dogodkov. Ustvarili bomo "sklic" na gumb kot spremenljivko, kot je ta:
var button = document.querySelector("button");Zdaj, ko imamo sklic na gumb, bomo priložili poslušalca dogodka:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));In kaj želimo storiti v primeru klika? V naš div dodajte ime predavanja! A tako kot smo za sklicevanje na gumb potrebovali referenco za gumb, bomo potrebovali tudi referenco za div. Naredimo jih oba hkrati, tukaj je celoten del kode:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));To je vse, kar sem vam hotel pokazati. Z nekaj CSS-jem, ki smo jih dodali v ta razred "yay", lahko div preidemo v in iz njega:
Oglejte si Pen Click Something / Change Class avtorja Chris Coyier (@chriscoyier) na CodePen.
Zakaj to eno?
Možnosti načrtovanja so neskončne, če nadzorujete CSS in stanje katerega koli elementa (katera imena razredov ima). Skrivanje in razkrivanje stvari je očitna moč, a res bi lahko bilo kar koli.
Izravnava
Ne pozabite, da niste omejeni na spreminjanje enega imena predavanja. Lahko spremenite več razredov na enem elementu ali spremenite razrede na več elementih.
Poglejte v lastnost classList več. "Preklop" ni edina možnost.
Tako kot HTML in CSS ima tudi JavaScript različne stopnje podpore za brskalnik. Oglejte si podporo brskalnika za classList in dodajte addEventListener. Ali ste v redu s temi nivoji podpore za svoj projekt? V nasprotnem primeru lahko pogledate polifil ali celo jQuery.
Uporabili smo dogodek »klik«, vendar je veliko drugih. Drugi dogodki miške, drsenje, tipkovnica in še več. Veliko sto.
Metoda, ki smo jo uporabili za izbiro, je bila document.querySelector. To je bilo koristno, ker vrne en sam element, s katerim lahko sodelujemo. Poleg tega so izbirniki, ki jih daste, podobni izbirnikom CSS. document.querySelector("#overlay .modal > h2");bi bila zakonita izbira. To pa ni edina metoda za izbiro, obstajajo pa še druge, kot so getElementById, querySelectorAll, getElementsByClassName in druge.
Tu je primer, kje izberemo kup navigacijskih elementov in na vse pritrdimo obdelovalec klikov hkrati:
Oglejte si razrede zamenjave pisala za stvari Chrisa Coyierja (@chriscoyier) na CodePen.
Če se JavaScript, ki smo ga napisali v našem majhnem primeru, iz kakršnega koli razloga ni uspel naložiti, bomo še vedno imeli gumb »Kliknite me«. Toda s klikom ne bi šlo veliko, kajne? Morda bi lahko ta gumb vstavili z JavaScriptom, tako da gumba sploh ni, razen če vemo, da bo deloval? Dobra ideja, kajne? ;)