Đếm các thay đổi trạng thái HTML theo thời gian thực với CSS
Đếm là một nhiệm vụ phổ biến trong các ứng dụng web. Bạn có bao nhiêu email chưa đọc? Có bao nhiêu nhiệm vụ không được kiểm tra trong danh sách việc cần làm của bạn? Có bao nhiêu hương vị bánh rán được đóng gói trong giỏ hàng? Tất cả đều là những câu hỏi quan trọng mà người dùng xứng đáng nhận được câu trả lời cho.
Vì vậy, bài đăng này sẽ chỉ cho bạn cách đếm các yếu tố bi-nêu, cấu thành phần lớn các điều khiển của người dùng như hộp kiểm và nhập văn bản, sử dụng bộ đếm CSS.
Bạn cần phải nhắm mục tiêu các trạng thái với CSS trước, có thể bằng phương tiện các lớp giả và các thuộc tính HTML cho phép chúng tôi làm điều đó. Đi trước và thử nghiệm ý tưởng và khám phá các lớp giả khác nhau có thể chỉ ra sự thay đổi trong trạng thái của một yếu tố, một cách linh hoạt.
Chúng ta sẽ bắt đầu với các hộp kiểm đơn giản nhất.
1. Hộp kiểm
Hộp kiểm đi vào “đã kiểm tra” trạng thái khi họ đánh dấu. Các :đã kiểm tra lớp giả cho biết trạng thái được kiểm tra.
hộp kiểm số 1
hộp kiểm số 2
hộp kiểm số 3
Đã kiểm tra:
Bỏ chọn:
:: root counter-reset: tickedBoxCount, unTickyBoxCount; input [type = 'hộp kiểm'] bộ đếm tăng: unTickyBoxCount; input [type = 'hộp kiểm']: đã kiểm tra bộ đếm tăng: tickedBoxCount; #tickyBoxCount :: trước content: counter (tickedBoxCount); #unTickyBoxCount :: trước content: counter (unTickyBoxCount);
Như tôi đã nói trước đây, trường hợp này rất đơn giản. Chúng tôi đặt hai bộ đếm ở phần tử gốc và tăng từng cái cho mỗi hộp kiểm cho hai trạng thái của nó, tương ứng. Các giá trị truy cập là sau đó hiển thị ở một nơi được chỉ định bằng cách sử dụng Nội dung bất động sản.
Nếu bạn muốn hiểu rõ hơn Bộ đếm CSS hoạt động như thế nào, hãy xem bài viết trước của chúng tôi.
Dưới đây, bạn có thể thấy kết quả cuối cùng. Khi bạn kiểm tra và bỏ chọn các hộp kiểm, các giá trị của “Đã kiểm tra” và “Bỏ chọn” quầy là sửa đổi thời gian thực.
2. Nhập văn bản
Chúng tôi cũng có thể đếm có bao nhiêu văn bản nhập đã được lấp đầy Và bao nhiêu đã bị bỏ trống bởi người dùng. Giải pháp này sẽ không đơn giản như giải pháp trước, bởi vì, không giống như các hộp kiểm, đầu vào văn bản không có lớp giả gắn cờ khi chúng được lấp đầy.
Vì vậy, chúng ta cần tìm một tuyến đường thay thế. Có một lớp giả cho biết khi một yếu tố có văn bản giữ chỗ; nó được gọi là : giữ chỗ.
Nếu chúng tôi sử dụng trình giữ chỗ trong kiểu nhập văn bản của mình, chúng tôi có thể biết khi nào trường nhập vào trống. Điều này xảy ra khi người dùng chưa gõ gì vào đó bởi vì trình giữ chỗ sẽ biến mất khi điều đó xảy ra.
Điền:
Trống:
:: root counter-reset: fillInputCount, blankInputCount; input [type = 'text'] counter-tăng: fillInputCount; input [type = 'text']: giữ chỗ hiển thị counter-tăng: blankInputCount; #fillsInputCount :: trước content: counter (fillInputCount); #emptyInputCount :: trước content: counter (blankInputCount);
Kết quả tương tự như lần trước - hai quầy tự động tăng và giảm khi chúng tôi thêm hoặc xóa văn bản đến hoặc từ các trường đầu vào.
3. Chi tiết
Các trạng thái thay thế của một phần tử không phải luôn luôn được chỉ định bởi các lớp giả. Có thể có Thuộc tính HTML thực hiện công việc đó, như trong trường hợp
Các
Vì thế, mở Thuộc tính HTML trong phần tử. Thuộc tính này có thể được nhắm mục tiêu trong CSS uhát bộ chọn thuộc tính của nó.
Câu 1: câu hỏi số 1
trả lời 1
Câu 2: câu hỏi số 2
câu trả lời số 2
Câu 3: câu hỏi số 3
câu trả lời số 3
Mở:
Đã đóng:
:: root counter-reset: openDetailCount, closDetailCount; chi tiết tăng số lần truy cập: closDetailCount; chi tiết [open] counter-tăng: openDetailCount; #closesDetailCount :: trước content: counter (closDetailCount); #openDetailCount :: trước nội dung: bộ đếm (openDetailCount);
Kết quả là hai bộ đếm CSS thời gian thực một lần nữa: Mở và Đóng.
4. Nút radio
Đếm các nút radio đòi hỏi một kỹ thuật khác nhau. Chúng tôi chắc chắn có thể sử dụng :đã kiểm tra giả lớp chúng tôi sử dụng cho các hộp kiểm. Tuy nhiên, các nút radio là được sử dụng khác với hộp kiểm.
Nút radio là có nghĩa là trong nhóm. Người dùng chỉ có thể chọn một trong nhóm. Mỗi nhóm hoạt động như một đơn vị duy nhất. Hai trạng thái mà một nhóm nút radio có thể có một trong các nút được chọn hoặc là không ai trong số họ được chọn.
Vì vậy, chúng ta không nên đếm các nút radio bằng các nút riêng lẻ, nhưng theo nhóm nút. Để đạt được điều đó, chúng tôi sử dụng : loại thứ n bộ chọn. Tôi sẽ giải thích nó sau; trước tiên hãy xem mã.
đài-1.1 đài-1,2 đài-1.3
đài phát thanh-2.1 đài phát thanh 2.2 đài phát thanh-2,3
đài phát thanh-2.1 đài phát thanh 2.2 đài phát thanh-2,3
Đã chọn:
Không được chọn:
Chúng ta cần phải gán cùng tên đến các nút radio trong cùng một nhóm. Mỗi nhóm trong đoạn mã trên có ba nút radio bên trong.
:: root counter-reset: chọnRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) counter-tăng: unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n): đã kiểm tra counter-gia tăng: chọnRadioCount; input [type = 'radio']: not (: nth-of-type (3n)): đã kiểm tra counter-tăng: unSelectedRadioCount -1 chọnRadioCount; #selectedRadioCount :: trước content: counter (chọnRadioCount); #unSelectedRadioCount :: trước content: counter (unSelectedRadioCount);
Ba quy tắc kiểu đầu tiên trong đoạn trích trên giống như các quy tắc chúng tôi đã áp dụng cho các hộp kiểm, ngoại trừ, thay vì nhắm mục tiêu mỗi nút radio, chúng tôi nhắm mục tiêu nút radio cuối cùng trong mỗi nhóm, đó là cái thứ ba trong trường hợp của chúng tôi (: loại thứ n (3n)). Vì vậy, chúng tôi không đếm tất cả các nút radio nhưng chỉ một nhóm mỗi.
Tuy nhiên, điều đó sẽ không cho chúng tôi một kết quả thời gian thực chính xác, vì chúng tôi chưa đưa ra bất kỳ quy tắc nào để đếm hai nút radio khác trong nhóm. Nếu một trong số chúng được kiểm tra thì nó sẽ được tính và kết quả không được kiểm tra sẽ giảm cùng một lúc.
Đây là lý do tại sao chúng ta thêm một -1 giá trị sau unSelectedRadioCount trong quy tắc kiểu cuối cùng nhắm vào hai nút radio khác trong một nhóm. Khi một trong số họ được kiểm tra, -1 sẽ giảm kết quả không được kiểm tra.
Vị trí của số lượng
Bạn chỉ có thể nhìn thấy kết quả chính xác sau khi đếm xong, tức là sau khi tất cả các yếu tố được tính đã được xử lý. Đây là lý do tại sao chúng ta cần đặt phần tử bên trong mà chúng ta sẽ hiển thị các bộ đếm chỉ sau khi các yếu tố được tính trong mã nguồn HTML.
Bạn có thể không muốn hiển thị các bộ đếm bên dưới các yếu tố nhưng ở một nơi khác trên trang. Trong trường hợp này, bạn cần định vị lại quầy sử dụng các thuộc tính CSS như dịch, lề, hoặc là Chức vụ.
Nhưng, đề nghị của tôi sẽ là sử dụng lưới CSS để bạn có thể tạo bố cục của trang của bạn độc lập với thứ tự các thành phần của nó trong mã nguồn HTML. Chẳng hạn, bạn có thể dễ dàng tạo một lưới đặt các bộ đếm ở trên hoặc bên cạnh các trường đầu vào.
