जावास्क्रिप्ट क्लासलिस्ट संपत्ति के साथ कक्षाओं को कैसे टॉगल करें

जावास्क्रिप्ट के साथ तत्वों पर कक्षाओं को कैसे टॉगल करें एक सबसे व्यावहारिक कौशल है जिसे आप एक डेवलपर के रूप में सीख सकते हैं। टॉगलिंग का उपयोग कई चीजों के लिए किया जाता है, जिसमें मेनू दिखाना और छिपाना, खोज फ़िल्टर जोड़ना और हटाना, और सोशल मीडिया बटन (पसंद, थम्स अप आदि) शामिल हैं।

संदर्भ के आधार पर, कोड की कुछ पंक्तियों की तुलना में टॉगलिंग को अधिक जटिल नहीं होना चाहिए। आज हम न केवल टॉगल करना बल्कि सामान्य रूप से जावास्क्रिप्ट सीखना शुरू करने का एक आसान तरीका सीखेंगे।

HTML संरचना

इससे पहले कि हम जावास्क्रिप्ट के साथ कार्यात्मक सामग्री प्राप्त करें, आइए कुछ HTML तत्वों को सेट करें ताकि हमारे पास बातचीत करने के लिए कुछ हो। आइए एक रैपर, एक बटन और एक बॉक्स बनाएं।

निम्नलिखित को अपने HTML दस्तावेज़ के बॉडी टैग के अंदर रखें:

<div class="wrapper">
  <button class="button">Toggle</button>
  <div class="box"></div>
</div>

पैरेंट डिव एलिमेंट (आवरण) केवल वहाँ है इसलिए हम इसके बच्चों के तत्वों (बॉक्स और बटन) को CSS के साथ केन्द्रित कर सकते हैं। यह कॉस्मेटिक है, और इसके काम करने के लिए आवश्यक नहीं है।

नोट:यदि आप कोडपेन जैसे ऑनलाइन कोड संपादक का उपयोग कर रहे हैं तो आप इस कोड को HTML टैब विंडो में जोड़ सकते हैं। वे आपके लिए शेष HTML को परदे के पीछे से जोड़ते हैं, जिसमें बॉडी टैग भी शामिल हैं।

सीएसएस शैली

पैरेंट डिव एलिमेंट में .wrapper होता है वर्ग जिसमें कुछ फ्लेक्सबॉक्स गुण हैं जो केंद्र अपने बाल तत्वों को संरेखित करता है:बॉक्स और बटन। मैं फ्लेक्सबॉक्स के कैसे और क्यों में नहीं जाऊंगा, यह एक अन्य ट्यूटोरियल के लिए है।

कॉस्मेटिक उद्देश्यों के लिए बटन और बॉक्स को कुछ बुनियादी शैली वर्ग मिलते हैं।

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

यहां पर ध्यान केंद्रित करने वाली महत्वपूर्ण बात है .bg-red क्लास जिसमें CSS शामिल है पृष्ठभूमि-रंग '#AA2F18' (लाल) के मान वाली संपत्ति। जब हम बटन एलिमेंट पर क्लिक करते हैं तो यह वह क्लास है जिसे हम अपने बॉक्स एलिमेंट में टॉगल (जोड़ना या हटाना) चाहते हैं।

जावास्क्रिप्ट इवेंट हैंडलिंग

इससे पहले कि हम जावास्क्रिप्ट के साथ तत्वों में हेरफेर करना शुरू कर सकें, हमें पहले अपने दो तत्वों (बॉक्स और बटन) के संदर्भ को संग्रहीत करना होगा। हम ऐसा दो चर घोषित करके करते हैं, button , और box .फिर हम दो तत्वों को उनके संबंधित चरों के लिए निर्दिष्ट करते हैं।

उस बॉक्स और बटन तत्व का चयन करने के लिए जिसका हम संदर्भ संग्रहीत करना चाहते हैं, हम शानदार querySelector का उपयोग करेंगे। हमारे तत्वों की कक्षाओं को हथियाने की विधि:

let button = document.querySelector(".button");
let box = document.querySelector(".box");

अब जब हमारे पास हमारे प्रत्येक लक्षित तत्व का संदर्भ है, तो हम उनके गुणों और विधियों तक पहुंच कर, उन्हें DOM में हेरफेर कर सकते हैं। इस मामले में, हम एक ईवेंट श्रोता . का उपयोग करना चाहते हैं जो एक क्लिक ईवेंट . को सुनता है बटन तत्व पर। क्लिक का पता चलने के बाद हम एक फ़ंक्शन . निष्पादित करना चाहते हैं जो पृष्ठभूमि रंग टॉगलिंग . चलाता है हमारे बॉक्स तत्व पर।

ऐसा करने के लिए हम संलग्न करेंगे addEventListener() हमारे बटन तत्व के लिए विधि (इसके चर संदर्भ के माध्यम से)। इस ईवेंट श्रोता पद्धति के अंदर हम दो पैरामीटर मान जोड़ रहे हैं:'click' (ईवेंट प्रकार), औरfunction() . हम इस उदाहरण में एक अनाम (अनाम) फ़ंक्शन का उपयोग करेंगे।

फिर अनाम फ़ंक्शन के अंदर:हम JavaScript क्लासलिस्ट प्रॉपर्टी के toggle() . को अटैच करते हैं हमारे बॉक्स तत्व के लिए विधि। टॉगल विधि का काम हमारे .bg-red . को जोड़ना या हटाना है कक्षा:

button.addEventListener("click", function() {
  box.classList.toggle("bg-red");
});

क्लासलिस्ट टॉगल विधि इस तरह काम करती है:यदि निर्दिष्ट वर्ग पहले से ही लक्ष्य तत्व पर मौजूद है, तो इसे हटा दिया जाएगा। यदि यह मौजूद नहीं है, तो इसे जोड़ा जाएगा।

हमारा काम हो गया! अब आप जानते हैं कि सादे जावास्क्रिप्ट के साथ निर्दिष्ट तत्वों पर कक्षाओं को कैसे टॉगल किया जाता है। मैंने इस ट्यूटोरियल के सारे कोड CodePen पर डाल दिए हैं।

कोड IE10 और बाद के सभी आधुनिक ब्राउज़रों के साथ संगत है।