Count HTML State Perubahan Masa Nyata dengan CSS
Penghitungan adalah tugas di mana-mana dalam aplikasi web. Berapa banyak e-mel belum dibaca yang anda ada? Berapa banyak tugas dibiarkan dalam senarai tugasan anda? Berapa banyak perisa donat yang dibeli di dalam keranjang belanja? Semua adalah soalan penting pengguna berhak untuk jawapan.
Oleh itu, siaran ini akan menunjukkan kepada anda cara untuk mengira unsur yang didefinisikan dua, yang merupakan majoriti pengguna kawalan seperti kotak pilihan dan input teks, menggunakan kaunter CSS.
Anda perlu targetkan negara-negara tersebut dengan CSS terlebih dahulu, yang mungkin dilakukan dengan cara pseudo-classes dan HTML attributes yang membolehkan kita melakukan perkara itu. Teruskan dan bereksperimen dengan idea itu dan pelajari kelas-kelas pseudo yang berbeza yang boleh menunjukkan perubahan dalam keadaan elemen, secara dinamik.
Kami akan mulakan dengan kotak pilihan yang paling mudah.
1. Kotak centang
Kotak centang masuk ke dalam “diperiksa” nyatakan apabila mereka ditandakan. The : diperiksa pseudo-class menunjukkan keadaan yang diperiksa.
kotak semak # 1
kotak semak # 2
kotak semak # 3
Diperiksa:
Tidak tercatat:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; masukan [jenis = 'kotak semak'] counter-increment: unTickedBoxCount; masukkan [kotak semak 'jenis =']: disemak penambahan pulangan: tickedBoxCount; #tickedBoxCount :: sebelum kandungan: kaunter (tickedBoxCount); #unTickedBoxCount :: sebelum kandungan: kaunter (unTickedBoxCount);
Seperti yang saya katakan sebelum ini, kes ini sangat mudah. Kami tetapkan dua kaunter pada elemen akar dan peningkatan masing-masing bagi setiap kotak semak bagi dua negeri masing-masing. Nilai-nilai kaunter kemudiannya dipaparkan di tempat yang ditetapkan menggunakan kandungan harta.
Sekiranya anda mahu memahami dengan lebih baik bagaimana kaunter CSS berfungsi, lihat pada jawatan kami yang terdahulu.
Di bawah ini, anda dapat melihat hasil akhir. Apabila anda menyemak dan nyahtanda kotak semak, nilai-nilai “Diperiksa” dan “Tidak tercatat” kaunter adalah masa sebenar diubah suai.
2. Input teks
Kita juga boleh mengira berapa banyak input teks telah diisi dan berapa banyak telah dibiarkan kosong oleh pengguna. Penyelesaian ini tidak semestinya seperti yang sebelumnya, kerana, tidak seperti kotak pilihan, input teks tidak mempunyai pseudo-kelas untuk menandakan apabila mereka diisi.
Jadi, kita perlu mencari laluan alternatif. Terdapat kelas pseudo yang menunjukkan apabila elemen mempunyai teks pemegang tempat; ia dipanggil : ruang letak-ditunjukkan.
Jika kami menggunakan ruang letak dalam input teks kami, kami dapat mengetahui apabila medan input kosong. Ini berlaku apabila pengguna belum lagi menaip apa-apa ke dalamnya kerana pemegang tempat akan hilang apabila itu berlaku.
Diisi:
Kosong:
:: root counter-reset: filledInputCount, emptyInputCount; input [type = 'text'] counter-increment: filledInputCount; input [type = 'text']: placeholder-shown counter-increment: emptyInputCount; #filledInputCount :: sebelum kandungan: counter (filledInputCount); #emptyInputCount :: sebelum kandungan: counter (emptyInputCount);
Hasilnya sama dengan yang sebelumnya-kedua-dua kaunter adalah secara automatik ditambah dan diturunkan seperti yang kami tambahkan atau alih keluar teks ke atau dari medan input.
3. Butiran
Istilah alternatif bagi suatu elemen tidak selalu harus ditunjukkan hanya oleh pseudo-classes. Mungkin ada Atribut HTML yang melakukan pekerjaan itu, seperti dalam kes
The
Jadi, buka Atribut HTML dalam elemen. Atribut ini boleh disasarkan dalam CSS andamenyanyi pemilih sifatnya.
S1: soalan # 1
jawapan # 1
S2: soalan # 2
jawapan # 2
S3: soalan # 3
jawapan # 3
Buka:
Ditutup:
:: root counter-reset: openDetailCount, closedDetailCount; butiran counter-increment: closedDetailCount; butiran [terbuka] counter-increment: openDetailCount; #closedDetailCount :: sebelum kandungan: counter (closedDetailCount); #openDetailCount :: sebelum kandungan: counter (openDetailCount);
Hasilnya ialah dua penanda CSS masa nyata lagi: Buka dan Tutup.
4. Butang radio
Mengira butang radio memerlukan teknik yang berbeza. Kita pasti boleh menggunakannya : diperiksa kelas pseudo yang digunakan untuk kotak pilihan. Walau bagaimanapun, butang radio adalah digunakan secara berbeza daripada kotak pilihan.
Butang radio adalah bermaksud untuk berkumpulan. Pengguna hanya boleh memilih satu di dalam kumpulan. Setiap kumpulan bertindak sebagai unit tunggal. Kedua-dua menyatakan bahawa kumpulan butang radio boleh sama ada salah satu butang dipilih atau tiada seorang pun daripada mereka yang dipilih.
Jadi, kita tidak boleh mengira butang radio dengan butang individu, tetapi oleh kumpulan butang. Untuk mencapai itu, kami menggunakannya : nth-of-type pemilih. Saya akan menerangkannya kemudian; mari kita lihat kod terlebih dahulu.
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
Dipilih:
Tidak dipilih:
Kita perlu berikan nama yang sama ke butang radio dalam kumpulan yang sama. Setiap kumpulan dalam kod di atas mempunyai tiga butang radio di dalamnya.
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n): checked counter-increment: selectedRadioCount; input [type = 'radio']: not (: nth-of-type (3n)): checked counter-increment: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: sebelum kandungan: counter (selectedRadioCount); #unSelectedRadioCount :: sebelum kandungan: counter (unSelectedRadioCount);
Peraturan tiga gaya pertama dalam coretan di atas adalah sama seperti yang kami gunakan pada kotak pilihan, kecuali, bukan penyasaran setiap butang radio, kami menyasarkan butang radio terakhir dalam setiap kumpulan, yang merupakan yang ketiga dalam kes kami (: nth-of-type (3n)). Jadi, kami tidak mengira semua butang radio tetapi hanya satu setiap kumpulan.
Walau bagaimanapun, itu tidak akan memberi kita hasil masa nyata yang betul, seperti yang kita belum lagi memberikan sebarang peraturan untuk mengira dua butang radio yang lain dalam kumpulan itu. Sekiranya salah seorang daripada mereka diperiksa ia harus dikira & hasil yang tidak terkawal akan berkurangan pada masa yang sama.
Itulah sebabnya kita tambahkan -1 nilai selepas unSelectedRadioCount dalam peraturan gaya terakhir yang mensasarkan dua butang radio yang lain dalam kumpulan. Apabila salah seorang daripada mereka diperiksa, -1 akan mengurangkan hasil yang tidak terkawal.
Penempatan Bilangan
Anda hanya boleh melihat hasil yang betul selepas pengiraan telah selesai, iaitu selepas semua unsur yang akan dikira telah diproses. Inilah sebabnya mengapa kita perlu meletakkan unsur di mana kita akan memaparkan kaunter hanya selepas unsur-unsur dikira dalam kod sumber HTML.
Anda mungkin tidak mahu menunjukkan kaunter di bawah unsur tetapi di tempat lain pada halaman. Dalam kes ini, anda perlu meletakkan semula kaunter menggunakan sifat CSS seperti menterjemah, margin, atau kedudukan.
Tetapi, cadangan saya adalah gunakan CSS Grid supaya anda boleh membuat susun atur halaman anda bebas daripada susunan elemennya dalam kod sumber HTML. Misalnya, anda boleh dengan mudah membuat grid yang menempatkan kaunter di atas atau di sebelah medan input.
