Count HTML State Promjene u stvarnom vremenu s CSS
Brojanje je sveprisutan zadatak u web-aplikacijama. Koliko nepročitanih poruka imate? Koliko je zadataka na popisu obveza neoznačeno? Koliko je okusa uštipkan u košaricu? Svi su ključna pitanja na koja korisnici zaslužuju odgovore.
Dakle, ovaj će vam post pokazati kako izbrojati elemente koji su izrečeni u dva navrata, koji čine većinu korisničkih kontrola, poput potvrdnih okvira i unosa teksta, pomoću CSS brojača.
Trebaš prvo ciljanje tih država s CSS-om, što je moguće pomoću pseudo-klase i HTML atributi koji nam omogućuju da učinimo upravo to. Nastavite eksperimentirati s idejom i istražite različite pseudo-klase koje mogu ukazati na promjenu stanja elementa, dinamički.
Počinjemo s najjednostavnijim potvrdnim okvirima.
1. Potvrdni okviri
Uključuju se potvrdni okviri “provjeren” navedite kada su označeni. Isprobali pseudo-klase označava stanje provjere.
potvrdni okvir # 1
potvrdni okvir # 2
potvrdni okvir # 3
Provjereno:
neprovjeren:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; input [type = 'checkbox'] counter-increment: unTickedBoxCount; input [type = 'checkbox']: označeno counter-increment: tickedBoxCount; #tickedBoxCount :: before content: counter (tickedBoxCount)); #unTickedBoxCount :: before content: counter (unTickedBoxCount);
Kao što sam već rekao, ovaj slučaj je vrlo jednostavan. Mi postavite dva brojača na korijenski element i povećajte svaki za svaki potvrdni okvir za svoja dva stanja. Vrijednosti brojača su tada prikazano na određenom mjestu pomoću sadržaj svojstvo.
Ako želite bolje razumjeti kako CSS brojači funkcioniraju, pogledajte naš prethodni post.
U nastavku možete vidjeti konačni rezultat. Kada potvrdite i poništite potvrdne okvire, vrijednosti “provjeren” i “neprovjeren” brojači su u stvarnom vremenu.
2. Unos teksta
Možemo također računati koliko unosa teksta su popunjena i koliko su ostavljeni prazni korisnik. Ovo rješenje neće biti tako jednostavno kao prethodno, jer, za razliku od potvrdnih okvira, unos teksta nema pseudo-klase da biste označili kada su ispunjeni.
Dakle, moramo pronaći alternativnu rutu. To je pseudo-klasa označava kada element ima tekst rezerviranog mjesta; to se zove : Rezerviranog-prikazan.
Ako koristimo rezervirana mjesta u našem unosu teksta, možemo znati kada je polje za unos prazno. To se događa kada korisnik još nije ništa upisao u nju jer će rezervirano mjesto nestati kada se to dogodi.
ispunjen:
Prazan:
:: root counter-reset: filledInputCount, emptyInputCount; input [type = 'text'] counter-increment: filledInputCount; input [type = 'text']: prikazano rezervirano mjesto counter-increment: emptyInputCount; #filledInputCount :: before content: counter (filledInputCount); #emptyInputCount :: before content: counter (emptyInputCount));
Rezultat je sličan prethodnom - dva brojača su automatski se povećava i smanjuje dok dodajemo ili uklanjamo tekst u polja za unos ili iz njih.
3. Pojedinosti
Alternativna stanja elementa ne moraju uvijek biti naznačena samo pseudo-klasama. Možda postoji HTML atributi rade taj posao, kao u slučaju
Tako, otvorena HTML atribut u elementu. Ovaj atribut može biti ciljan u CSS upjeva njegov izbornik atributa.
Pitanje 1: pitanje # 1
odgovor # 1
Q2: pitanje # 2
odgovor # 2
P3: pitanje # 3
odgovor # 3
Otvorena:
Zatvoreno:
:: root counter-reset: openDetailCount, closedDetailCount; detalji counter-increment: closedDetailCount; details [open] counter-increment: openDetailCount; #closedDetailCount :: before content: counter (closedDetailCount); #openDetailCount :: before content: counter (openDetailCount);
Rezultat je dva CSS brojača u stvarnom vremenu ponovno: otvoreno i zatvoreno.
4. Radio gumbi
Za brojanje radio gumba potrebna je drugačija tehnika. Svakako bismo mogli koristiti Isprobali pseudo-klasa koju smo koristili za potvrdne okvire. Međutim, radio gumbi su različito od potvrdnih okvira.
Radio gumbi su značilo biti u skupinama. Korisnik može odabrati samo jednu unutar grupe. Svaka skupina djeluje kao jedna jedinica. Postoje i dva stanja koja grupa za radio gumbe može imati odabran je jedan od gumba ili niti jedan od njih nije odabran.
Dakle, ne trebamo brojati radio gumbe pojedinačnim gumbima, nego po skupinama gumba. Da bismo to postigli, mi iskoristiti : N-ti-o tipu selektor. Objasnit ću ti kasnije; prvo ćemo vidjeti kod.
radio-1,1 radio-1,2 radio-1,3
Radio-2.1 radio-2,2 radio-2.3
Radio-2.1 radio-2,2 radio-2.3
Odabran:
Neoznačeni:
Moramo dodijeliti isto ime na radio gumbe u istoj grupi. Svaka grupa u gornjem kodu ima tri radio gumba.
:: root counter-reset: odabraniRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n): označeno counter-increment: selectedRadioCount; input [type = 'radio']: nije (: nth-of-type (3n)): označeno counter-increment: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: before content: counter (selectedRadioCount); #unSelectedRadioCount :: before content: counter (unSelectedRadioCount);
Prva tri pravila stila u gornjem isječku jednaka su onima koja smo primijenili na potvrdne okvire, osim na, umjesto na ciljanje svaki Radio gumb, ciljamo zadnji gumb za odabir u svakoj grupi, koji je treći u našem slučaju (: N-ti-o-tipa (3N)). Dakle, ne računamo sve radio gumbe, nego samo jedna po grupi.
Međutim, to nam neće dati točan rezultat u stvarnom vremenu, kao što smo mi još nisu dali nikakvo pravilo za brojanje druga dva radio gumba u grupi. Ako je jedan od njih označen, treba ga prebrojiti i neprovjereni rezultat treba smanjiti u isto vrijeme.
Zato i mi dodati -1 vrijednost nakon unSelectedRadioCount u zadnjem pravilu stila koji cilja druga dva gumba u grupi. Kada je jedan od njih označen, -1 htjeti smanjite neprovjereni rezultat.
Postavljanje optužbi
Možete vidjeti samo ispravan rezultat nakon završetka prebrojavanja, tj. nakon obrade svih elemenata koje treba prebrojati. Zbog toga moramo postaviti element unutar kojeg ćemo prikazati brojače tek nakon što se elementi računaju u HTML izvornom kodu.
Možda ne želite prikazati brojače ispod elemenata, ali negdje drugdje na stranici. U ovom slučaju, vi premjestiti brojače pomoću CSS svojstava kao što su Prevedi, margina, ili položaj.
Ali, moj prijedlog bi bio koristite CSS Grid tako da možete stvoriti izgled stranice neovisno o redoslijedu elemenata u HTML izvornom kodu. Na primjer, možete jednostavno stvoriti mrežu koja postavlja brojače iznad ili pokraj polja za unos.
