Néha ahhoz, hogy valami hatalmas és összetett tanulásba kezdhessen, meg kell tanulnia valami apró és egyszerű dolgot. A JavaScript óriási és összetett, de kicsi és egyszerű dolgok megtanulásával beléphet. Ha web-tervező vagy, azt hiszem, egy dolgot tanulhatsz meg, ami rendkívül felhatalmaz.
Ezt szeretném, ha megtanulná: Ha valamelyik elemre kattint, akkor változtasson osztályt valamelyik elemen.
Ezt feltétlenül feltétlenül képzelje el, hogy van egy gombunk és egy div:
Click Me I'm an element A div-nek lehetnek bizonyos alapstílusai, és bizonyos stílusai is lehetnek, ha van egy adott osztálya:
div ( /* base styles */ ) div.yay ( /* styles when it has this class */ )Az ügyes CSS-Tricksters ezt felismerheti a jelölőnégyzet feltörésének lehetőségeként, de ma nem ezen dolgozunk.
A gombhoz egy „eseményfigyelőt” szeretnénk csatolni: egy kis kódot, amellyel „meghallgathatunk”, esetünkben kattintson az eseményekre, és amikor ez megtörténik, futtasson további kódot.
Tudja, hogyan kell a CSS-ben elemeket „kiválasztanunk” annak érdekében, hogy stilizáljuk őket? Ezt JavaScript-ben is meg kell tennünk, hogy csatolhassuk az eseményhallgatónkat. Létrehozunk egy "hivatkozást" a gombra, mint változót, így:
var button = document.querySelector("button");Most, hogy van hivatkozásunk a gombra, csatoljuk az eseményfigyelőt:
button.addEventListener("click", function() ( /* run code here, after the button is clicked. */ ));És mit akarunk tenni egy kattintás esetén? Adjon osztálynevet divunkhoz! De ugyanúgy, mint amire szükségünk volt egy hivatkozásra a gombhoz, hogy ezzel dolgozzunk, úgy a div-re is szükségünk lesz. Végezzük el mindkettőt egyszerre, itt van a teljes kód bit:
var button = document.querySelector("button"); var element = document.querySelector("div"); button.addEventListener("click", function() ( element.classList.toggle("yay"); ));Ez az egész, amit meg akartam mutatni. Néhány CSS hozzáadásával az „yay” osztályhoz elhalványíthatjuk a div-t:
Lásd: Chris Coyier (@chriscoyier) Tollal kattintva valami / osztály módosítása a CodePen-en.
Miért pont ez az egy dolog?
A tervezési lehetőségek végtelenek, amikor vezérli a CSS-t és bármely elem állapotát (milyen osztálynevekkel rendelkezik). A dolgok elrejtése és feltárása a nyilvánvaló erő, de valójában bármi lehet.
Szintezés
Ne feledje, hogy nem korlátozódik egyetlen osztálynév megváltoztatására. Megváltoztathat egy osztály több osztályát, vagy több elem osztályát is.
Nézzen meg többet a classList tulajdonságban. A „Toggle” nem az egyetlen lehetőség.
Csakúgy, mint a HTML és a CSS, a JavaScript is különböző szintű böngészőtámogatást nyújt a dolgokhoz. Keresse meg a classList böngésző támogatását, és adja hozzá az addEventListener fájlt. Jól van a projekt ilyen szintű támogatásával? Ha nem, akkor megnézheti a polyfill-eket, vagy akár a jQuery-t is.
A „click” eseményt használtuk, de rengeteg más van. Egyéb egéresemények, görgetés, billentyűzet és egyebek. Sok száz.
A kiválasztáshoz használt módszer az volt document.querySelector. Ez azért volt hasznos, mert egyetlen elemet ad vissza, amellyel dolgozhatunk. Ráadásul az általa megadott szelektorok olyanok, mint a CSS szelektorok. document.querySelector("#overlay .modal > h2");legitim válogatás lenne. Ez nem az egyetlen módszer a kiválasztáshoz, vannak olyanok is, mint a getElementById, a querySelectorAll, a getElementsByClassName és még sok más.
Íme egy példa, ahol kiválasztunk egy csomó navigációs elemet, és egy kattintáskezelőt csatolunk mindegyikhez egyszerre:
Lásd Chris Coyier (@chriscoyier) tollváltási osztályai a cuccon a CodePen-en.
Ha a kis példánkban írt JavaScriptet valamilyen okból nem sikerült betölteni, akkor is marad egy gomb, amely azt mondja: "Kattintson rám". De ha rákattintasz, az egy cseppet sem sokat tenne? Esetleg beilleszthetnénk azt a gombot JavaScript-szel, így a gomb ott sincs, csak ha tudjuk, hogy működni fog? Jó ötlet, mi? ;)