HTML स्टेट को सीएसएस के साथ वास्तविक समय में बदल दें

गिनती करना एक सर्वव्यापी कार्य है वेब अनुप्रयोगों में। आपके पास कितने अपठित ईमेल हैं? आपकी टू-डू सूची में कितने कार्य अनियंत्रित हैं? शॉपिंग कार्ट में कितने डोनट फ्लेवर मिलते हैं? सभी महत्वपूर्ण प्रश्न हैं जिनके लिए उपयोगकर्ता उत्तर देते हैं.

तो, यह पोस्ट आपको दिखाएगी कि कैसे द्वि-कथित तत्वों की गणना करें, जो चेकबॉक्स और टेक्स्ट इनपुट जैसे अधिकांश उपयोगकर्ता नियंत्रण का गठन करता है, CSS काउंटरों का उपयोग करना.

आपको उन राज्यों को पहले सीएसएस के साथ लक्षित करें, के माध्यम से संभव है छद्म कक्षाएं और HTML विशेषताएँ कि हमें बस ऐसा करने की अनुमति दें। आगे बढ़ें और विचार के साथ प्रयोग करें और विभिन्न छद्म वर्गों का पता लगाएं, जो गतिशील रूप से एक तत्व की स्थिति में बदलाव का संकेत दे सकते हैं.

हम सबसे सरल, चेकबॉक्स से शुरू करेंगे.

1. चेकबॉक्स

चेकबॉक्स में जाते हैं “जाँच” राज्य करें जब वे टिक गए हैं। : जाँच छद्म वर्ग जाँच की स्थिति इंगित करता है.

  चेकबॉक्स # 1
  चेकबॉक्स # 2
  चेकबॉक्स # 3
 
जाँच:  
अनियंत्रित:

 :: रूट काउंटर-रीसेट: टिकबॉक्सबॉक्स, अनटचबॉक्सबॉक्स;  इनपुट [टाइप = 'चेकबॉक्स'] काउंटर-इंक्रीमेंट: अनटचबॉक्सबॉक्स  इनपुट [टाइप = 'चेकबॉक्स']: चेक किया गया काउंटर-इन्क्रीमेंट: टिकडबॉक्स;  #tickedBoxCount :: पहले content: counter (tickedBoxCount);  #unTickedBoxCount :: पहले content: counter (unTickedBoxCount);

जैसा मैंने पहले कहा, यह मामला बहुत सरल है। हम रूट तत्व पर दो काउंटर सेट करें और इसके दो राज्यों के लिए प्रत्येक चेकबॉक्स के लिए क्रमशः वेतन वृद्धि। काउंटर मान तो हैं का उपयोग कर एक निर्दिष्ट स्थान में प्रदर्शित किया जाता है सामग्री संपत्ति.

अगर आप बेहतर समझना चाहते हैं CSS काउंटर कैसे काम करते हैं, हमारे पिछले पोस्ट पर एक नज़र है.

नीचे, आप अंतिम परिणाम देख सकते हैं। जब आप चेकबॉक्स को चेक और अनचेक करते हैं, के मान “चेक किए गए” तथा “अनियंत्रित” काउंटर हैं वास्तविक समय संशोधित.

2. पाठ इनपुट

हम यह भी गिन सकते हैं कि कितने टेक्स्ट इनपुट हैं भर चुके हैं और कितने खाली छोड़ दिया गया है उपयोगकर्ता द्वारा। यह समाधान पिछले वाले की तरह सीधा नहीं होगा, क्योंकि, चेकबॉक्स के विपरीत, पाठ इनपुट में छद्म कक्षाएं नहीं होती हैं जब वे भरे हों तो झंडा फहराना.

इसलिए, हमें एक वैकल्पिक मार्ग खोजने की जरूरत है। वहाँ एक छद्म वर्ग है कि है इंगित करता है कि किसी तत्व में प्लेसहोल्डर टेक्स्ट कब है; इसे कहते हैं : प्लेसहोल्डर-दिखाए.

यदि हम अपने पाठ इनपुट में प्लेसहोल्डर्स का उपयोग करते हैं, तो हम यह जान सकते हैं कि इनपुट फ़ील्ड कब खाली है। यह तब होता है जब उपयोगकर्ता अभी तक इसमें कुछ भी टाइप नहीं किया है क्योंकि ऐसा होने पर प्लेसहोल्डर गायब हो जाएगा.

 
 
 
 
 भर ग्या:  
 खाली:

 :: रूट काउंटर-रीसेट: fillInputCount, blankInputCount;  इनपुट [टाइप = 'टेक्स्ट'] काउंटर-इन्क्रीमेंट: भराइनपुटकाउंट;  इनपुट [प्रकार = 'टेक्स्ट']: प्लेसहोल्डर-दिखाया गया काउंटर-वृद्धि: खालीइन्पुटकाउंट;  #filledInputCount :: सामग्री से पहले: काउंटर (भरा हुआइंकोपाउंट);  #emptyInputCount :: पहले content: counter (खालीइंनप्यूटकाउंट);

परिणाम पिछले एक के समान है-दो काउंटर हैं स्वचालित रूप से बढ़ा और घटाया हुआ जैसा कि हम इनपुट फ़ील्ड से या में टेक्स्ट जोड़ते या हटाते हैं.

3. विवरण

किसी तत्व के वैकल्पिक राज्यों को हमेशा केवल छद्म वर्गों द्वारा इंगित नहीं किया जाना चाहिए। वहां हो सकता है HTML उस काम को करने का गुण रखता है, के मामले में पसंद है

तत्त्व.

तत्त्व की सामग्री को प्रदर्शित करता है

बाल तत्व. जब उपयोगकर्ता उस पर क्लिक करता है, तो अन्य सामग्री

तत्त्व दिखाई देना. ध्यान दें कि

तत्त्व हमेशा पहले आने की जरूरत है के बच्चों के बीच

इसलिए,

दो राज्य हैं: खुला और बंद। खुले राज्य द्वारा इंगित किया गया है की उपस्थिति खुला तत्व में HTML विशेषता. इस विशेषता को CSS u में लक्षित किया जा सकता हैइसके गुण चयनकर्ता गाएं.

  Q1: प्रश्न # 1
 उत्तर 1
 
  Q2: सवाल # 2
 उत्तर # 2
 
  Q3: प्रश्न # 3
 उत्तर # 3
 
 
 
 खुला:  
 बन्द है:

 :: रूट काउंटर-रीसेट: ओपनडाइटकाउंट, क्लोजडेलकाउंट;  विवरण काउंटर-इंक्रीमेंट: बंदडाइटेलाउंट;  विवरण [खुला] काउंटर-इंक्रीमेंट: ओपनडाइटकाउंट;  #closedDetailCount :: इससे पहले सामग्री: काउंटर (बंदडाइटेलाउंट);  #openDetailCount :: इससे पहले सामग्री: काउंटर (ओपनडाइटकाउंट);

परिणाम है दो वास्तविक समय सीएसएस-काउंटर फिर से: खुला और बंद.

4. रेडियो बटन

रेडियो बटन की गिनती के लिए एक अलग तकनीक की आवश्यकता होती है। हम निश्चित रूप से उपयोग कर सकते हैं : जाँच छद्म वर्ग हम चेकबॉक्स के लिए इस्तेमाल किया। हालाँकि, रेडियो बटन हैं चेकबॉक्स की तुलना में अलग तरीके से उपयोग किया जाता है.

रेडियो बटन हैं समूहों में होना चाहिए. उपयोगकर्ता एक समूह के अंदर केवल एक का चयन कर सकता है। प्रत्येक समूह एकल इकाई के रूप में कार्य करता है। दो राज्यों में एक रेडियो बटन समूह हो सकता है बटन में से एक का चयन किया जाता है या उनमें से कोई भी चयनित नहीं है.

इस प्रकार, हमें व्यक्तिगत बटनों द्वारा रेडियो बटन की गणना नहीं करनी चाहिए, लेकिन बटन समूहों द्वारा. जिसे हासिल करने के लिए हम का उपयोग करें : N वें प्रकार की- चयनकर्ता. मैं इसे बाद में समझाता हूँ; पहले कोड देखते हैं.

 रेडियो 1.1 रेडियो 1.2 रेडियो 1.3 
 रेडियो-2.1 रेडियो 2.2 रेडियो 2.3 
 रेडियो-2.1 रेडियो 2.2 रेडियो 2.3 
 
 चयनित:  
 अचयनित:

हमारे लिए आवश्यक है एक ही नाम असाइन करें एक ही समूह में रेडियो बटन के लिए। ऊपर दिए गए कोड के प्रत्येक समूह में तीन रेडियो बटन हैं.

 :: रूट काउंटर-रीसेट: चयनितरेडियोकाउंट, अनसलेक्टेडरेडियोकाउंट;  इनपुट [प्रकार = 'रेडियो']: nth-of-type (3n) काउंटर-वृद्धि: unSelectedRadioCount;  इनपुट [प्रकार = 'रेडियो']: nth-of-type (3n): चेक काउंटर-इन्क्रीमेंट: selectRadioCount;  इनपुट [प्रकार = 'रेडियो']: नहीं (: nth-of-type (3n)): चेक किया गया काउंटर-वृद्धि: unSelectedRadioCount -1 चयनितRadioCount;  #selectedRadioCount :: सामग्री से पहले: काउंटर (चयनितRadioCount);  #unSelectedRadioCount :: सामग्री से पहले: काउंटर (unSelectedRadioCount);

उपरोक्त स्निपेट में पहले तीन शैली के नियम वही हैं जो हमने लक्ष्यीकरण के बजाय, चेकबॉक्स पर लागू किए थे हर एक रेडियो बटन, हम प्रत्येक समूह में अंतिम रेडियो बटन को लक्षित करते हैं, जो हमारे मामले में तीसरा है (: N वें के- प्रकार (3n))। इसलिए, हम सभी रेडियो बटनों की गिनती नहीं करते हैं लेकिन प्रति समूह केवल एक.

हालाँकि, यह हमें एक सही वास्तविक समय परिणाम नहीं देगा, जैसा कि हम समूह में अन्य दो रेडियो बटन गिनने के लिए अभी तक कोई नियम नहीं दिया है. यदि उनमें से एक की जाँच की जाती है तो उसे गिना जाना चाहिए और अनियंत्रित परिणाम एक ही समय में घट जाना चाहिए.

यही कारण है कि हम एक जोड़ें -1 मूल्य बाद unSelectedRadioCount अंतिम शैली नियम में जो एक समूह में अन्य दो रेडियो बटन को लक्षित करता है। जब उनमें से एक की जाँच की जाती है, -1 मर्जी अनियंत्रित परिणाम में कमी.

गिनती का स्थान

आप केवल सही परिणाम देख सकते हैं मतगणना समाप्त होने के बाद, यानी सभी तत्वों को गिना जाने के बाद संसाधित किया गया है। यही कारण है कि हमें उस तत्व को रखने की आवश्यकता है जिसके अंदर हम काउंटरों को प्रदर्शित करेंगे तत्वों की गिनती के बाद ही HTML स्रोत कोड में.

आप तत्वों के नीचे काउंटरों को दिखाना नहीं चाहते, लेकिन पृष्ठ पर कहीं और हो सकते हैं। इस मामले में, आप काउंटरों को बदलने की जरूरत है जैसे सीएसएस गुणों का उपयोग करना अनुवाद करना, हाशिया, या पद.

लेकिन, मेरा सुझाव यह होगा सीएसएस ग्रिड का उपयोग करें ताकि आप अपने पेज का लेआउट बना सकें HTML स्रोत कोड में इसके तत्वों के क्रम से स्वतंत्र. उदाहरण के लिए, आप आसानी से एक ग्रिड बना सकते हैं जो काउंटरों को इनपुट फ़ील्ड के ऊपर या बगल में रखता है.