JavaScript से एलिमेंट्स पर क्लासेज टॉगल करना एक डेवलपर के रूप में सीखने के सबसे व्यावहारिक कौशल में से एक है। टॉगलिंग का उपयोग कई चीजों के लिए किया जाता है, जिसमें मेन्यू दिखाना और छुपाना, सर्च फिल्टर्स जोड़ना और हटाना, और सोशल मीडिया बटन (लाइक्स, थंब्स अप आदि) शामिल हैं।
टॉगलिंग को संदर्भ के आधार पर कोड की कुछ लाइनों से अधिक जटिल नहीं होना चाहिए। आज हम न केवल टॉगलिंग बल्कि सामान्य रूप से JavaScript सीखने के लिए एक सरल तरीके से शुरू करेंगे।
HTML संरचना
इससे पहले कि हम JavaScript के साथ फंक्शनल सामान पर पहुंचें, आइए कुछ HTML एलिमेंट्स सेट करें ताकि हमारे पास इंटरैक्ट करने के लिए कुछ हो। आइए एक रैपर, एक बटन, और एक बॉक्स बनाएं।
इसे अपने HTML डॉक्यूमेंट के बॉडी टैग्स के अंदर रखें:
<div class="wrapper">
<button class="button">Toggle</button>
<div class="box"></div>
</div>पैरेंट डिव एलिमेंट (रैपर) केवल इसलिए है ताकि हम इसके चाइल्ड एलिमेंट्स (बॉक्स और बटन) को CSS से सेंटर अलाइन कर सकें। यह कॉस्मेटिक है, और इसके काम करने के लिए आवश्यक नहीं है।
नोट: यदि आप CodePen जैसे ऑनलाइन कोड एडिटर का उपयोग कर रहे हैं तो आप इस कोड को HTML टैब विंडो में जोड़ सकते हैं। वे पर्दे के पीछे बाकी HTML आपके लिए जोड़ते हैं, जिसमें बॉडी टैग्स शामिल हैं।
CSS स्टाइल
पैरेंट डिव एलिमेंट में .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 background-color प्रॉपर्टी है जिसका वैल्यू '#AA2F18' (लाल) है। यह वह क्लास है जिसे हम अपने बॉक्स एलिमेंट पर टॉगल (जोड़ना या हटाना) करना चाहते हैं जब हम बटन एलिमेंट पर क्लिक करते हैं।
JavaScript इवेंट हैंडलिंग
इससे पहले कि हम JavaScript से एलिमेंट्स में हेरफेर करना शुरू कर सकें, हमें पहले अपने दो एलिमेंट्स (बॉक्स और बटन) का रेफरेंस स्टोर करना होगा। हम दो वेरिएबल्स डिक्लेयर करके ऐसा करते हैं, button, और box। फिर हम दोनों एलिमेंट्स को उनके संबंधित वेरिएबल्स को असाइन करते हैं।
बॉक्स और बटन एलिमेंट को चुनने के लिए जिसे हम रेफरेंस स्टोर करना चाहते हैं, हम शानदार querySelector मेथड का उपयोग करके हमारे एलिमेंट्स के क्लासेज को पकड़ेंगे:
let button = document.querySelector(".button");
let box = document.querySelector(".box");अब जब हमारे पास हमारे टार्गेट एलिमेंट्स में से प्रत्येक का रेफरेंस है, तो हम उनकी प्रॉपर्टीज़ और मेथड्स को एक्सेस करके उन्हें DOM मैनिपुलेट कर सकते हैं। इस मामले में, हम एक इवेंट लिसनर का उपयोग करना चाहते हैं जो बटन एलिमेंट पर क्लिक इवेंट सुनता है। क्लिक का पता चलने के बाद हम अपने बॉक्स एलिमेंट पर बैकग्राउंड कलर टॉगलिंग चलाने वाले फंक्शन को एक्सीक्यूट करना चाहते हैं।
ऐसा करने के लिए हम अपने बटन एलिमेंट (इसके वेरिएबल रेफरेंस के माध्यम से) पर addEventListener() मेथड अटैच करेंगे। इस इवेंट लिसनर मेथड के अंदर हम दो पैरामीटर वैल्यूज़ जोड़ रहे हैं: 'click' (इवेंट टाइप), और function()। हम इस उदाहरण में अनाम (नामहीन) फंक्शन का उपयोग करेंगे।
फिर अनाम फंक्शन के अंदर: हम अपने बॉक्स एलिमेंट पर JavaScript classList प्रॉपर्टी के toggle() मेथड को अटैच करते हैं। टॉगल मेथड का काम या तो हमारे .bg-red क्लास को जोड़ना या हटाना है:
button.addEventListener("click", function() {
box.classList.toggle("bg-red");
});classList टॉगल मेथड ऐसे काम करता है: यदि निर्दिष्ट क्लास टार्गेट एलिमेंट पर पहले से मौजूद है, तो इसे हटा दिया जाएगा। यदि यह मौजूद नहीं है, तो इसे जोड़ दिया जाएगा।
हम हो गए! अब आप जानते हैं कि प्लेन JavaScript से निर्दिष्ट एलिमेंट्स पर क्लासेज कैसे टॉगल करें। मैंने इस ट्यूटोरियल के सभी कोड को CodePen पर डाल दिया है।
कोड IE10 और ऊपर से सभी आधुनिक ब्राउज़र्स के साथ संगत है।
