Count HTML State Maina Real-Time ar CSS
Skaitīšana ir visuresošs uzdevums Web lietojumprogrammās. Cik daudz nelasītu e-pastu jums ir? Cik uzdevumu ir palikuši nepārbaudīti jūsu uzdevumu sarakstā? Cik pirkstu maisiņi tiek iepildīti iepirkumu grozā? Visi ir būtiski jautājumi, par kuriem lietotāji ir pelnījuši atbildes.
Tātad šis ieraksts jums parādīs, kā saskaitīt divus norādītos elementus, kas veido lielāko daļu lietotāju kontroles, piemēram, izvēles rūtiņas un teksta ievades, izmantojot CSS skaitītājus.
Tev vajag vispirms atlasiet valstis ar CSS, kas ir iespējams, izmantojot pseido klases un HTML atribūti kas mums ļauj to darīt. Iet uz priekšu un eksperimentējiet ar ideju un izpētiet dažādas pseido klases, kas var dinamiski norādīt elementa stāvokļa izmaiņas..
Mēs sāksim ar vienkāršākajām izvēles rūtiņām.
1. izvēles rūtiņas
Atzīmē izvēles rūtiņas “pārbaudīts” norādiet, kad tie ir atzīmēti. The : pārbaudīts pseido klase norāda pārbaudīto stāvokli.
izvēles rūtiņa # 1
izvēles rūtiņa # 2
izvēles rūtiņa # 3
Pārbaudīts:
Nav atzīmēts:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; ievade [type = 'checkbox'] counter-increment: unTickedBoxCount; ievade [type = 'checkbox']: pārbaudīta counter-increment: tickedBoxCount; #tickedBoxCount :: pirms content: counter (tickedBoxCount); #unTickedBoxCount :: pirms saturs: skaitītājs (unTickedBoxCount);
Kā jau iepriekš teicu, šī lieta ir ļoti vienkārša. Mēs iestatiet divus skaitītājus pie saknes elementa un katrai no divām valstīm atzīmētās izvēles rūtiņas. Tad skaitītāju vērtības ir tiek parādīts norādītajā vietā, izmantojot saturu īpašums.
Ja vēlaties labāk saprast kā darbojas CSS skaitītāji, apskatiet mūsu iepriekšējo ziņu.
Zemāk jūs varat redzēt gala rezultātu. Kad pārbaudāt un noņemat atzīmi no izvēles rūtiņām, tās vērtības “Pārbaudīts” un “Nav atzīmēts” skaitītāji ir reāllaikā.
2. Teksta ievades
Mēs varam arī rēķināties, cik teksta ievades ir aizpildītas un cik ir atstāti tukši lietotājs. Šis risinājums nebūs tik vienkārši, kā iepriekšējais, jo atšķirībā no izvēles rūtiņām, teksta ievades nav pseidoklases atzīmēt, kad viņi ir piepildīti.
Tātad, mums ir jāatrod alternatīvs maršruts. Tas ir pseidogrupa norāda, kad elementam ir vietas vārda teksts; to sauc : parādīts vietas rezervētājs.
Ja mūsu teksta ievades vietā izmantojam vietniekus, mēs varam zināt, kad ievades lauks ir tukšs. Tas notiek, kad lietotājs vēl nav ievadījis neko tāpēc, ka vietas pazīmes pazūd, kad tas notiks.
Piepildīts:
Tukšs:
:: root counter-reset: filledInputCount, emptyInputCount; ievade [type = 'text'] counter-increment: piepildītaInputCount; ievade [type = 'text']: parādīts uz vietas: counter-increment: emptyInputCount; #filledInputCount :: pirms saturs: skaitītājs (fillInputCount); #emptyInputCount :: pirms saturs: skaitītājs (emptyInputCount);
Rezultāts ir līdzīgs iepriekšējiem diviem skaitītājiem automātiski palielinās un samazinās pievienojot vai noņemot tekstu no ievades laukiem vai no tiem.
3. Detaļas
Elementa alternatīvie stāvokļi ne vienmēr ir jānorāda tikai pseido klasēs. Varētu būt HTML atribūti, kas veic šo darbu, tāpat kā
The
Tātad, atvērts HTML atribūts elementā. Šo atribūtu var atlasīt CSS udziedāt tā atribūtu selektoru.
1. jautājums: 1. jautājums
atbilde # 1
2. jautājums: 2. jautājums
atbilde # 2
3. jautājums: 3. jautājums
atbilde # 3
Atvērt:
Slēgts:
:: root counter-reset: openDetailCount, slēgtsDetailCount; detaļas counter-increment: slēgtaDetailCount; informācija [open] counter-increment: openDetailCount; #closedDetailCount :: pirms saturs: skaitītājs (slēgtsDetailCount); #openDetailCount :: pirms saturs: skaitītājs (openDetailCount);
Rezultāts ir divi reālā laika CSS skaitītāji atkal: Atvērt un Slēgts.
4. Radio pogas
Raidīšanas pogu skaitīšanai ir nepieciešama cita metode. Mēs noteikti varētu izmantot : pārbaudīts pseido klases, ko izmantojām izvēles rūtiņām. Tomēr ir pogas izmantot citādi nekā izvēles rūtiņas.
Radio pogas ir domāts būt grupām. Lietotājs var izvēlēties tikai vienu grupā. Katra grupa darbojas kā viena vienība. Abas valstis, kurām ir radiopogu grupa, var būt arī ir izvēlēta viena no pogām vai neviens no tiem nav atlasīts.
Līdz ar to mums nevajadzētu skaitīt radiopogas ar atsevišķām pogām pēc pogu grupām. Lai to panāktu, mēs izmantot : n-s-veida selektoru. Es to paskaidrošu vēlāk; vispirms redzēsim kodu.
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
Atlasīts:
Nav atlasīts:
Mums vajag piešķirt to pašu nosaukumu uz vienas grupas radio pogām. Katrai grupai iepriekšminētajā kodā ir trīs iekšējās pogas.
:: root counter-reset: izvēlētaRadioCount, unSelectedRadioCount; ievade [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; ievade [type = 'radio']: nth-of-type (3n): pārbaudīta counter-increment: selectedRadioCount; ievade [type = 'radio']: nav (: nth-of-type (3n)): pārbaudīta counter-increment: unSelectedRadioCount -1 izvēlētaRadioCount; #selectedRadioCount :: pirms saturs: skaitītājs (izvēlētsRadioCount); #unSelectedRadioCount :: pirms saturs: skaitītājs (unSelectedRadioCount);
Pirmie trīs stila noteikumi iepriekšminētajā fragmentā ir tādi paši kā tie, kurus piemērojām izvēles rūtiņām, izņemot mērķauditorijas atlasi katrs radio poga, katrā mērķgrupā mēs atlasām pēdējo pogu, kas ir trešais mūsu gadījumā (: nth-of-type (3n)). Tātad, mēs neskaitām visas radio pogas, bet tikai viena grupā.
Tomēr tas nedos mums pareizu reālā laika rezultātu, kā mēs vēl nav norādījuši nekādus noteikumus, lai saskaitītu pārējās divas grupas pogas. Ja viens no tiem tiek pārbaudīts, tas jāuzskaita un vienlaicīgi jānovērš nekontrolētais rezultāts.
Tāpēc mēs pievienot a -1 vērtību pēc tam unSelectedRadioCount pēdējā stila noteikumā, kas attiecas uz pārējām divām grupas pogām. Kad viens no tiem ir pārbaudīts, -1 gribu samaziniet nepārbaudīto rezultātu.
Skaitļu izvietojums
Jūs varat redzēt tikai pareizo rezultātu pēc skaitīšanas pabeigšanas, t.i., kad visi skaitītie elementi ir apstrādāti. Tāpēc mums jāievieto elements, kurā mēs parādīsim skaitītājus tikai pēc elementu skaitīšanas HTML pirmkodā.
Jūs, iespējams, nevēlaties rādīt skaitītājus zem elementiem, bet kaut kur citur lapā. Šajā gadījumā jūs jāmaina skaitītāji izmantojot CSS īpašības, piemēram, tulkot, starpību, vai pozīciju.
Bet, mans ierosinājums būtu izmantot CSS režģi lai jūs varētu izveidot lapas izkārtojumu neatkarīgi no tā elementu secības HTML pirmkodā. Piemēram, varat viegli izveidot režģi, kas novieto skaitītājus virs vai blakus ievades laukiem.
