Miten hallita CSS-luokkia JavaScript

Kehitettäessä yksinkertaisia ​​verkkohankkeita, jotka sisältävät käyttäjän vuorovaikutusta, kuinka parhaiten hallita valtion muutoksia CSS: ssä tulee ajatusruokaa. Kun käyttäjä laajentaa harmonikaa tai vaihtaa valikon, miten CSS-tyyli muuttuu? Yksi suosittu ratkaisu sisältää valtion luokat, nimeämiskokous, joka käyttää luokan nimiä, kuten on aktiivinen tai laajennettu tyyliin koukut.

• 12 Yhteinen JavaScript-kysymykset vastasivat

Näitä valtion luokkia hallinnoidaan tyypillisesti JavaScriptissa. Lataa Mock Android-sovellus ja avaa Verkkosivusto hakemisto tekstieditorissasi ja näet tämän itse Dev / JS / Main.js .

Yksi asia, jonka saatatte tässä, on, että on paljon kaksoiskappaleita, jotka kaikki laukaisivat hyvin samankaltaisia ​​luokan vaihto. Oletettavasti, jos tämä hanke kasvaa kooltaan, niin olisi kaksoiskappaleiden määrä. Paljon tehokkaampi lähestymistapa olisi sen sijaan kirjoittaa yksi JavaScript-toiminto, joka suorittaa saman tehtävän ja sitä voidaan käyttää uudelleen ja uudestaan ​​- mutta vaihtaa eri valtion luokat eri elementeillä. Tässä opetusohjelmassa tutkimme, miten tehdä juuri niin.

Aloittaminen konsolissa CD-levyksi "Verkkosivustolle" ja ajaa NPM-asennus Hankkeen solmun riippuvuudet asentamiseksi. Työskentelemme dev Hakemisto täältä ulos.

01. HTML5-datamääritteiden käyttö

Sisään index.html , Etsi .js-kuvaus elementti linjalla 103 ja kiinnitä alle HTML5-datamäärittymät. Käytämme tätä kuviota tietojen tallentamiseksi, joten milloin jsdescription Klikkataan uudelleenkäytettävä toiminto tietää luokan, jonka haluamme vaihtaa ja elementit, jotka se on vaihdettava.

data-class="is-active" data-class-element ="js-description-slide, js-home-slide" 

02. Luo data-class.js

Jssk js hakemisto, luo uusi tiedosto nimeltä data-class.js . Tämä on paikka, jossa rakennamme uudelleenkäytettävän tehtävän. Sisällä, kirjoita Iife (välittömästi kutsuttu toiminto ilmaisu) kotelemaan koodi ja tuoda sitten lähikuva Helper, jota käytämme myöhemmin opetusohjelmassa.

 (Toiminto () {var CloseSparent = vaativat ("../../ node_modules / orionjs / avustajat / lähisimmät.js");
}) (); 

03. Tartu elementteihin ja silmukan läpi

Helperin tuonnin alapuolella meidän on luotava kaikki elementtien nodelisti datakanava Attribuutit, koska tämä on ainoa attribuutti, joka ei ole valinnainen. Seuraavaksi me sitten silmukat heidän läpi klassisella Varten Silmukka, jotta voimme käyttää kunkin yksittäisen elementin.

 var Elems = Asiakirja .QuerySelector.com ("[Data-Class]"), A; (A = 0, A & Lt; Elems.Length, A ++) {
} 

04. Lisää napsautuskohtaisen kuuntelija

Sisällä Varten Silmukka, lisää tapahtuman kuuntelija katsella napsautustapahtumia, joten tiedämme, milloin käyttäjä on napsauttanut elementtiä, jonka haluamme laukaista luokan vaihtaa (aka liipaisuelementti). Soita siihen Prosessinhange () Toiminto ja siirrä viittaus napsautukselliseen elementtiin, joka toiminnon soveltamisalaan on saatavilla Tämä Avainsana.

 Elems [a] .AddeventListener ("Klikkaa", toiminto () {
Prosessinhange (tämä); }); 

05. Lisää näppäimistön tapahtuman kuuntelija

Aivan napsautuskohtaisen kuuntelimen alapuolella, lisää toinen, jotta voit katsella tulla sisään avain ja suorita sitten sama Prosessinhange () Toiminto. Lisäämme näppäimistötapahtumien tukemista saavutettavuuden parantamiseksi ottamalla käyttäjille, jotka eivät voi käyttää osoitinlaitteita, kuten hiirtä.

 Elems [a] .AddeventListener ("Keypress", Toiminto (E) {
Jos (e.which === 13) {e.Preventdefault (); Prosessinhange (tämä);
}}); 

06. Lisää Mousedown Event Listener

Kaksoisnapsauttamalla elementti korostaa usein koko tekstin. Jos lisäämme logiikkaa laukaisuojasta, kun napsautat tätä toimintoa, haluamme estää. Voit tehdä tämän lisätä a museo Tapahtumien kuuntelija soittaa tapahtumiin estäädefault () Menetelmä ja peruuta oletuskäyttäytyminen.

 Elems [a] .Addeventlistener ("Mousedown", toiminto (E) {
E.Preventdefault (); }); 

07. Luo prosessinvaihto () -toiminto

Juuri sen jälkeen lähikuva Tuo, luo funktio nimeltä Prosessinhange () joka hyväksyy elementin. Tämä on sama tehtävä viitattu aiemmissa vaiheissa ja pitää kaikki logiikkamme käsittelyluokan siirtämiseksi kohdeelementissä.

Toiminnassa napata elementtien sisältö data-luokka attribuutti ja jaettu ryhmään. Tämä mahdollistaa useiden pilkulla erotetut luokat yksittäisessä datamääritteessä.

 var Professchange = Toiminto (ELEM) {var Dataclass = Elem .Dataset.class.split (",");
} 

08. Data-luokan soveltamisalan attribuutti

Seuraavaksi toiminnon sisällä tarkista a Tietokannan laajuus Attribuutti, jos se löytyy, jaettu ryhmään aiemmin. Tietokannan laajuus on valinnainen attribuutti, jonka avulla voit rajoittaa, missä luokan vaihto tapahtuu.

Esimerkiksi jos Dataclass-Scope asetettiin js-my-elementti , vain tavoiteosat, jotka ovat tämän lapsia, vaikuttavat liipaisimen napsautukseen.

 Jos (Elem.datase.classcope) {var DataclassCope = Elem.dataSet.classScope.split (",");
} 

09. Data-luokan elementti attribuutti

The Data-luokan elementti Attribuutti on toinen valinnainen attribuutti. Se määrittää elementin, jonka luokan vaihtoon vaikuttaa. Alla olevassa kappaleessa tarkistamme sen läsnäolon ja jos löytyy, muuntaa sen sisällön ryhmään kuin aiemmin. Kuitenkin, jos sitä ei löydy, asetamme sekä kohdeelementin että mahdollisuudet liipaisinelementtiin, mikä tarkoittaa, kun napsautat, se käynnistää luokan muutoksen itsessään.

 Jos (Elem.dataseet.classelement) {var Dataclasselement = Elem.dataset.classelement.split (",");
}
muu {var datataclasselement = [elem.classlist 
]; Jos (! Dataclassscope) {
var Dataclassscope = datakanava; }} 

10. Asennusluokka TOGGLE LOOP

Koska molemmat data-luokka ja Data-luokan elementti Hyväksy useita pilkulla erotettuja arvoja, meidän on ilmoitettava datanpituus Muuttuja ja määritä se kahden suurimman ominaisuuden pituus. Tämän tarkoituksena on varmistaa, että olemme riittävästi aikaa varmistaaksemme, että emme menetä kohdeelementtiä.

 var DataLength = Math.max (DataClasselement.Length, Dataclass.Length), B; for (b = 0; b & lt; datapituus; b ++) {
} 

11. Pienennä toistoa attribuutti-arvoissa

Tietojen attribuutteja on mahdollista saada kaksoiskappaleita. Esimerkiksi & lt; data-luokka = "on-piilotettu, on piilotettu" data-luokka-elementti = "JS-Elem, JS-ELEM2" & GT; on toiminnon kelvollinen käyttö, se olisi paljon parempi vain määrittää on piilotettu yhden kerran.

Tehdä tämä, lisäämme logiikan datanpituus Varten silmukka, jos a data-luokka tai Data-luokan elementti Merkintä puuttuu, käytä viimeistä voimassa olevaa. Tämä tarkoittaa & lt; datataclass = "on-piilotettu" data-luokka-elementti = "JS-ELEM, JS-ELEM2" & GT; toimivat myös.

 Jos (Dataclass [b]! == määrittelemätön) {
var eleemclass = datakuvaus [b]; } Jos (Dataclasselement [b]! == määrittelemätön) {
var DataclasselementValue = Dataclasselement [b]; } 

12. Pienennä toistoa

Edelleen Varten silmukka, sama taas, mutta Tietokannan laajuus attribuutti. Jos meillä ei ole laajuutta, käytä viimeistä voimassa olevaa. Tämä mahdollistaa yhden mahdollisuuden vaikuttaa monien luokan vaihtoihin.

 Jos (DataclassScope & amp; & amp; Dataclassscope [b]! == määrittelemätön) {
var cachedscope = data -lasscope [b]; } muu jos (cachedscope) {
Dataclassscope [b] = välimuistiin; } 

13. Soveltamisala: Osa 1

Viimeinen asia Varten Silmukka Meidän on tehtävä ennen kuin meillä on kaikki, mitä meidän on käynnistettävä luokan vaihto, varmista, että jos soveltamisala on määritelty, vain sen sisällä olevat elementit kohdistetaan. Aloitamme luomalla ehdollisen lausunnon, joka tarkastaa soveltamisalan tietoja, ja jos mitään ei löydy, käytä vain globaalia asiakirjan laajuutta.

 Jos (DataclassScope & amp; & amp; DataclassScope [B]! == "FALSE") {
}
muu {var elemref = document.querySelective ('. $ {DataClasselementValue}'), C; } 

14. Käytä soveltamista: osa 2

Tyhjennä, jos lausunto edellisestä vaiheesta, lisää alla oleva katkelma. Tämä havaitsee elementin Tietokannan laajuus ( elementti ) ja luo sitten valikoiman kaikki lapsen elementit Data-luokan elementti ( Elemref ). Jos laajuus ja kohdeelementit ovat samat, sen viittaus lisätään myös elementtien luetteloon.

 var Embempi = ClosenPerent (Elem, Dataclasscope [B]),
Elemref = [] .Slice.call (Embarent .QuerySelectectell ('. $ {DataclasselementValue}), C;
jos (elemParent.classList. sisältää (dataClassElementValue)) {elemRef.unshift (elemParent); } 

15. Vaihda luokat

Viimein, alareunassa Varten Silmukka, käytämme tietoja, jotka olemme rakentaneet ja vaihdimme kaikki oikeat luokat kaikki oikeat elementit. Tehdä tämä, tarvitsemme uuden Varten silmukka käy läpi Elemref'Nodelist / Array , pääsy kaikkiin elementteihin luokkalista API ja käytä sitten Vaihda () Menetelmä lisätä tai poistaa arvon elemclass .

 (c = 0; c & lt; elemref.length; c ++) {elemref [c] .classlist.toggle (elemclass); } 

16. Sisällytä toiminto

Nyt toiminto on valmis, että meidän on sisällytettävä se sisään Main.js . Tee tämä kopioi alla oleva päänsi ja lisää se tiedoston yläosaan, mutta Iva Toiminto. Emme myöskään tarvitse suurimman osan koodista Main.js , joten poista kaikki ylöspäin Stop Box Art -valintaruutukupla Snppet.

 Vaaditaan ("./ data-class.js"); 

17. Lisää suosikki kuvakkeisiin

Nyt käyttää toimintoa. Sisään index.html , löydä kaikki suosikki kuvakkeen esiintymät js-tähti Luokka. Lisää alla oleva attribuutti ja napsauttamalla sen pitäisi lisätä on aktiivinen itselleen, samoin kuin puuttuessa Data-luokan elementti , liipaisinelementti käyttää itseäsi kohdeelementiksi.

  data-luokka = "on-aktiivinen" 

18. Lisää pelin linkkejä

Seuraavaksi meidän on liitettävä Game Box Artsin kotiin liukussa, kun napsauttavat, on aktiivinen Lisätään oikeaan videopeliin, kun taas poistetaan myös nykyisestä kodin dia. Alla on attribuutteja, jotka sinun pitäisi lisätä JS-testi-peli-1 img. Toiset noudattavat samaa mallia, vain korvaa Testi-peli-1 Uuden pelin nimi.

  data-luokka = "on aktiivinen" data-luokan elementti = "JS-testi-peli1 - Slide-Slide, JS-Home-Slide" 

19. Lisää ruutuun Taide Toggles

Jokaisella peliversiolla on kytkin, joka vaihtaa laatikon edestä ja takana. Voit tehdä nämä työt lisätä katkelman jokaiseen tapaukseen JS-Boxart-Toggle . Kun napsautti useita asioita, tapahtuvat: on käännetty Vaihdetaan js-boxart SCOPED vanhempaan js-dia , kun taas tarkistetaan Vaihdetaan liipaisimen elementtiin.

  Data-Class = "on käännetty, tarkistettu" Data-Class-Element = "JS-Boxart, JS-Boxart-Toggle" Data-Class-Scope = "JS- Slide, JS-Boxart-Toggle "

20. Lisää takaisin nuolet

Lopuksi meidän on lisättävä attribuutit alla kaikkiin tapauksiin js-canceldescription ja JS-Peruuta-peli Joten kun napsautti sinut takaisin kotiin.

  Data-Class = "on-aktiivinen" data-luokan elementti = "JS-SLIDE, JS-Home-Slide" Data-Class-Scope = "JS-Slide, False" 

21. Rakenna hanke

Päätelaitteessa suorita alla oleva komento rakentaaksesi projektin. Tämä luo projektin kootun version uudessa erottaa Hakemisto. Tämä komento käyttää NPM-komentosarjoja - yksinkertainen, natiivi NPM vaihtoehto täysin toiminnallisille rakennustyökaluille, kuten Grunt tai Gulp.

 NPM Run Build 

22. Tarjoile hanketta.

Lopuksi, terminaalissa, suorita alla oleva komento, jotta voit luoda paikallisen palvelimen palvelemaan erottaa kansio. Ota huomioon päätelaitteessa palautettu porttinumero. Siirry selaimessa http: // localhost: sinun port-numero Voit tarkastella valmiita hankkeita.

 NPM RUN Tarjoa 

23. Testaa projekti

Nyt olet lopettanut projektin, kaikki luokan logiikka käsitellään nyt uudelleenkäytettävissä toiminnassa. Jos tämä oli live-projekti, ja lisää sivua tai komponentteja lisättiin ajan myötä, uuden luokan logiikan lisäämisen helppous vähennettäisiin huomattavasti, koska meidän ei enää tarvitse kirjoittaa ripoittavaa toiminnallisuutta kussakin tapauksessa.

Tämä artikkeli julkaistiin alunperin julkaisussa 267 web-suunnittelija, Creative Web Design -lehti - tarjoamalla asiantuntija-opetusohjelmia, huippuluokan suuntauksia ja ilmaisia ​​resursseja. Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

• CSS Grid Layout Secrets paljasti
• 21 Ylös esimerkkejä JavaScriptista
• Opas paremman CSS: n kirjoittamiseen