Count HTML State Muudab reaalajas CSS-iga
Loendamine on üldlevinud ülesanne veebirakendustes. Kui palju lugemata kirju teil on? Kui palju ülesandeid loendist ei tehta? Kui palju on sõõrikottide kottidesse ostetud? Kõik on olulised küsimused, mida kasutajad väärivad.
Niisiis näitab see postitus teile, kuidas seda teha loendage kahekordseid elemente, mis moodustavad enamuse kasutaja kontrolli, näiteks märkeruudud ja tekstisisestused, CSS-loendurid.
Sa pead suunata need CSS-i riigid, mis on võimalik pseudo-klassid ja HTML-atribuudid see võimaldab meil seda teha. Mine edasi ja proovige ideed ning uurige erinevaid pseudo-klasse, mis võivad dünaamiliselt näidata elemendi oleku muutust.
Alustame kõige lihtsamate kastidega.
1. Märkeruudud
Märkeruudud lähevad sisse “kontrollitud” märkige, millal nad märgistatakse. The : kontrollitud pseudo-klass näitab kontrollitud olekut.
märkeruut # 1
märkeruut # 2
märkeruut # 3
Kontrollitud:
Märkimata:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; sisend [type = 'checkbox'] counter-inrement: unTickedBoxCount; input [type = 'checkbox']: kontrollitud counter-increment: tickedBoxCount; #tickedBoxCount :: enne sisu: loendur (tickedBoxCount); #unTickedBoxCount :: enne sisu: loendur (unTickedBoxCount);
Nagu ma varem ütlesin, on see juhtum väga lihtne. Me seadke juurelemendil kaks loendurit ja iga juurdekasvu iga kahe ruudu jaoks vastavalt. Seejärel on loenduri väärtused kuvatakse määratud kohas, kasutades sisu vara.
Kui soovite paremini mõista kuidas CSS töötab, vaadake meie eelmist postitust.
Allpool näete lõpptulemust. Kui märkate ja tühjendate märkeruudud, siis selle väärtused “Kontrollitud” ja “Märkimata” loendurid on muutunud reaalajas.
2. Tekstisisestused
Samuti võime lugeda, mitu tekstisisestust on täidetud ja kui palju on jäetud tühjaks kasutaja poolt. See lahendus ei ole nii lihtne kui eelmine, sest erinevalt märkekastidest, tekstisisestustel ei ole pseudo-klasse lipuga, kui nad on täidetud.
Seega peame leidma alternatiivse marsruudi. See on pseudo-klass näitab, kui elemendil on kohatäitjatekst; seda nimetatakse : näidatud kohahoidja.
Kui me kasutame tekstisisestuses kohahoidjaid, võime teada, millal sisend väli on tühi. See juhtub siis, kui kasutaja pole siiani veel midagi kirjutanud sest kohatäitja kaob, kui see juhtub.
Täidetud:
Tühi:
:: root counter-reset: täidetudInputCount, emptyInputCount; sisend [type = 'text'] counter-increment: täidetudInputCount; sisend [type = 'text']: näidatud kohatäitja counter-increment: emptyInputCount; #filledInputCount :: enne sisu: loendur (täidetudInputCount); #emptyInputCount :: enne sisu: loendur (emptyInputCount);
Tulemus on sarnane eelmise kahe loenduriga automaatselt suurendatakse ja vähendatakse teksti lisamisel või eemaldamisel sisendväljadesse.
3. Üksikasjad
Elemendi alternatiivseid olekuid ei pea alati näitama ainult pseudo-klassid. Võib olla HTML-atribuudid teevad seda tööd, nagu näiteks
The
Nii et, avatud HTML-atribuut elemendis. Seda atribuuti saab CSS ulaulma selle atribuutivalijat.
K1: küsimus # 1
vastus # 1
K2: küsimus nr 2
vastus # 2
Kolmas küsimus: # 3
vastus # 3
Avatud:
Suletud:
:: root counter-reset: openDetailCount, suletudDetailCount; üksikasjad counter-increment: suletudDetailCount; üksikasjad [avatud] counter-inrement: openDetailCount; #closedDetailCount :: enne sisu: loendur (suletudDetailCount); #openDetailCount :: enne sisu: loendur (openDetailCount);
Tulemuseks on kaks reaalajas CSS-loendurit uuesti: Ava ja suletud.
4. Raadio nupud
Raadionuppude loendamine nõuab erinevat tehnikat. Me võime kindlasti seda kasutada : kontrollitud pseudo-klass, mida kasutasime märkeruutude jaoks. Siiski on raadionupud kasutatakse erinevalt kui märkeruudud.
Raadio nupud on mõeldud rühmadesse. Kasutaja saab valida ainult ühe grupi sees. Iga rühm tegutseb ühe üksusena. Ka kaks riiki, millel on raadionupp, võivad olla üks nuppudest on valitud või ükski neist pole valitud.
Seega ei peaks me loendama raadionuppe üksikute nuppudega, vaid nuppude rühmade kaupa. Selle saavutamiseks me kasutada : n-nda-tüüpi valija. Ma selgitan seda hiljem; Vaatame kõigepealt koodi.
raadio-1.1 raadio-1.2 raadio-1.3
raadio-2.1 raadio-2.2 raadio-2.3
raadio-2.1 raadio-2.2 raadio-2.3
Valitud:
Valimata:
Me peame määrake sama nimi sama grupi raadionuppudele. Igal ülaloleval koodil oleval rühmal on kolm raadionuppu.
:: root counter-reset: valitudRadioCount, unSelectedRadioCount; sisend [type = 'radio']: nth-of-type (3n) counter-inrement: unSelectedRadioCount; sisend [type = 'radio']: nth-of-type (3n): kontrollitud counter-increment: valitudRadioCount; sisend [type = 'radio']: ei (: nth-of-type (3n)): kontrollitud counter-inrement: unSelectedRadioCount -1 valitudRadioCount; #selectedRadioCount :: enne sisu: loendur (valitudRadioCount); #unSelectedRadioCount :: enne sisu: loendur (unSelectedRadioCount);
Ülaltoodud väljavõtte esimesed kolm stiilieeskirja on samad, mis me märkisime märkeruududesse, välja arvatud sihtimise asemel iga kord Raadio nupp, me sihime iga rühma viimase raadionupu, mis on meie puhul kolmas (: nth-of-type (3n)). Niisiis, me ei loe kõiki raadionuppe vaid ainult üks grupi kohta.
Kuid see ei anna meile õiget reaalajas tulemust, nagu me pole veel andnud ühtegi reeglit ülejäänud kahe raadionupu loendamiseks. Kui üks neist on kontrollitud, tuleb see arvestada ja kontrollimata tulemus peaks samal ajal vähenema.
Sellepärast me Lisa -1 väärtus pärast seda unSelectedRadioCount viimase stiili reeglis, mis suunab ülejäänud kaks raadionuppu grupis. Kui üks neist on kontrollitud, -1 tahe vähendage kontrollimata tulemust.
Loenduste paigutamine
Saate näha ainult õiget tulemust pärast loenduse lõpetamist, s.o pärast seda, kui kõik loendatavad elemendid on töödeldud. Sellepärast peame paigutama elemendi, mille sees me loendurid kuvame alles pärast elementide loendamist HTML-lähtekoodi.
Sa ei pruugi näidata loendureid elementide all, kuid mujal lehel. Sel juhul loendurite ümberpaigutamise vajadus kasutades CSS omadusi nagu tõlkida, marginaal, või positsiooni.
Aga minu ettepanek oleks kasutage CSS-võrku et saaksite oma lehe paigutuse luua sõltumata selle HTML-lähtekoodi elementide järjestusest. Näiteks saate hõlpsasti luua võrku, mis paneb loendurid sisendväljade kohal või kõrvale.
