JavaScript classList प्रॉपर्टी के contains() मेथड से एलिमेंट पर क्लास मौजूद है या नहीं चेक करना सरल और तेज है।
आइए पहले classList.contains() का उपयोग करने के लिए जेनेरिक फॉर्मूला देखें और फिर हम एक व्यावहारिक उपयोग के मामले को देखेंगे।
classList.contains() फॉर्मूला
var element = document.querySelector("selector")
element.classList.contains("class")ऊपर के जेनेरिक उदाहरण में हम बहुमुखी querySelector() मेथड का उपयोग करके अपने टार्गेट एलिमेंट को उसके सेलेक्टर नाम के माध्यम से ढूंढते हैं। सेलेक्टर क्लास सेलेक्टर, एलिमेंट सेलेक्टर, या कोई अन्य सेलेक्टर टाइप हो सकता है।
फिर हम querySelector() से मिले एलिमेंट को अपने डिक्लेयर्ड element वेरिएबल को असाइन करते हैं।
फिर हम अपने element पर इसके वेरिएबल रेफरेंस के माध्यम से classList प्रॉपर्टी के contains() मेथड को अटैच करते हैं। फिर contains() मेथड के आर्गुमेंट के अंदर (पैरेंथेसिस के अंदर) हम उस 'क्लास' का नाम निर्दिष्ट करते हैं जिसकी मौजूदगी हम चेक करना चाहते हैं।
जेनेरिक उदाहरण उबाऊ हैं, आइए व्यावहारिक बनें!
द अनक्लटर्ड न्यूज़ फीड
classList.contains() से फिल्टरिंग
— एक व्यावहारिक उपयोग का मामला
आप कई अलग-अलग कैटेगरीज़ के मिश्रित न्यूज़ फीड वाली वेबसाइट पर जा रहे हैं। लेकिन आप केवल टेक्नोलॉजी के बारे में पढ़ने में रुचि रखते हैं।
क्लटर्ड न्यूज़ फीड्स ईशनिंदा हैं। आइए classList.contains() मेथड का उपयोग करके अन्य सभी कैटेगरीज़ को फ़िल्टर आउट करें।
पहले, आइए कुछ HTML जोड़ें ताकि हमारे पास काम करने के लिए कुछ कंटेंट हो। फिर हम इसे जल्दी से स्टाइल करेंगे, और JavaScript पर आगे बढ़ेंगे।
हमारे न्यूज़ फीड के लिए HTML
<div class="wrapper">
<h1>Newsfeed</h1>
<div class="news-feed">
<h3 class="headline">
<a class="link category-health" href="#">Health</a>
</h3>
<h3 class="headline">
<a class="link category-finances" href="#">Finances</a>
</h3>
<h3 class="headline">
<a class="link category-politics" href="#">Politics</a>
</h3>
<h3 class="headline">
<a class="link category-nature" href="#">Nature</a>
</h3>
<h3 class="headline">
<a class="link category-humor" href="#">Humor</a>
</h3>
<h3 class="headline">
<a class="link category-weather" href="#">Weather</a>
</h3>
<h3 class="headline">
<a class="link category-technology" href="#">Technology</a>
</h3>
<h3 class="headline">
<a class="link category-sports" href="#">Sports</a>
</h3>
</div>
<div class="fixed-container">
<span>Filter:</span>
<button class="btn-technology">Technology</button>
</div>
</div>
<!-- wrapper -->हमारे HTML कंटेंट के लिए हमारे पास है:
- एक बड़ी हेडलाइन।
- विभिन्न कैटेगरीज़ के साथ एक न्यूज़ फीड।
- न्यूज़ फीड के बाहर, हमारे पास टेक्नोलॉजी नामक एक बटन है। यह वह बटन है जिसका उपयोग हम सभी नॉन-टेक्नोलॉजी टॉपिक्स को टॉगल (छुपाना/दिखाना) करने के लिए करेंगे।
जाहिर है, ऊपर हमारे न्यूज़ फीड उदाहरण में केवल कुछ न्यूज़ आइटम्स हैं (चित्रण उद्देश्यों के लिए), इसलिए यह क्लटर्ड नहीं दिखता। लेकिन एक वास्तविक मिश्रित न्यूज़ फीड में प्रत्येक न्यूज़ कैटेगरी से ढेर सारे आर्टिकल्स होंगे, जो फीड को भर देंगे। तभी फिल्टरिंग बटन उपयोगी होते हैं।
CSS स्टाइलिंग
निम्नलिखित सभी CSS कॉस्मेटिक और वैकल्पिक है, सिवाय .js-hide क्लास के, जो एक हेल्पर क्लास है जिसका उपयोग हम अगले सेगमेंट में JavaScript से करेंगे।
body {
font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}
.wrapper {
position: relative;
padding-left: 1rem;
padding-right: 1rem;
margin: 2rem auto;
max-width: 50em;
}
.news-feed {
border: 1px solid #eee;
max-height: 256px;
overflow-y: scroll;
}
.headline {
font-size: 1.25rem;
padding: 0.25rem 1.5rem;
}
.link {
color: #252525;
text-decoration: none;
}
.fixed-container {
position: fixed;
bottom: 0;
left: 0;
padding: 1.5rem;
}
.btn-technology {
cursor: pointer;
font-size: 1rem;
padding: 0.5rem 1rem;
margin-top: 2rem;
margin-left: 1rem;
border-radius: 4px;
border: 1px solid #82b97e;
outline: none;
}
.js-hide {
display: none;
}बस सुनिश्चित करें कि आप उस .js-hide क्लास को अपनी CSS स्टाइलशीट में जोड़ते हैं और आइए JavaScript पर आगे बढ़ें!
JavaScript
निम्नलिखित कोड को अपनी JS फाइल में कॉपी और पेस्ट करें। मैं नीचे समझाऊंगा कि सब कुछ कैसे काम करता है।
var btnTechnology = document.querySelector(".btn-technology")
var allNewsCategories = document.querySelectorAll(".news-feed .link")
function showCategoryTechnology() {
for (var i = 0; i < allNewsCategories.length; i++) {
if (!allNewsCategories[i].classList.contains("category-technology")) {
allNewsCategories[i].parentElement.classList.toggle("js-hide")
}
}
}
btnTechnology.addEventListener("click", showCategoryTechnology)JavaScript कोड कैसे काम करता है
- सबसे पहले हम
querySelector()का उपयोग करके अपने टेक्नोलॉजी बटन एलिमेंट को इसके क्लास सेलेक्टर.btn-technologyके माध्यम से पकड़ते हैं। जो बाद में हमारे फिल्टरिंग फंक्शन के लिए ट्रिगर के रूप में कार्य करेगा। हम अपने बटन एलिमेंट कोbtn-technologyनामक वेरिएबल को असाइन करते हैं। - फिर हम
querySelectorAll()का उपयोग करके अपने सभी न्यूज़ फीड (.news-feed) आइटम्स को पकड़ते हैं और प्रत्येक आइटम लिंक को उनके क्लास नाम (.link) द्वारा चुनते हैं। फिर हम अपने सभी न्यूज़ आइटम लिंक्स कोallNewsCategoriesनामक वेरिएबल को असाइन करते हैं। - फिर हम एक फंक्शन बनाते हैं,
showCategoryTechnology() {..}जिसे हम टेक्नोलॉजी बटन क्लिक होने पर कॉल करेंगे। - फंक्शन बॉडी के अंदर, हम न्यूज़ फीड एलिमेंट के अंदर सभी आइटम्स () के माध्यम से लूप करते हैं और उन्हें एक ऐरे
[i]में स्टोर करते हैं - लूप के अंदर, हम एक कंडीशनल if स्टेटमेंट जोड़ते हैं जो कहता है: "यदि हमारे द्वारा अभी इटरेट की गई लिस्ट के किसी भी आइटम में
.category-technologyक्लास नहीं है — तो उन आइटम्स पर.js-hideक्लास के साथ classList.toggle मेथड चलाएं। - अंतिम लाइन पर, हम अपने बटन एलिमेंट पर
addEventListener()मेथड अटैच करते हैं। हम इवेंट लिसनर को 'क्लिक' इवेंट के लिए सुनने के लिए कहते हैं। जब बटन क्लिक किया जाता है, तो यहshowCategoryTechnology()फंक्शन को कॉल करता है, जो पूरे कोड ब्लॉक को चलाता है जो इस टॉगलिंग फीचर को संभव बनाता है।
! सिम्बल (लॉजिकल ऑपरेटर) जिसे हम allNewsCategories[i] के सामने रखते हैं, वही हमारे if स्टेटमेंट के "नॉट" भाग को संभालता है। यदि आप ! हटाते हैं तो हमारा कोड अभी जो करता है उसके विपरीत करेगा।
हम classList.remove() का भी उपयोग कर सकते थे हमारे अनचाहे न्यूज़ आइटम्स को हटाने के लिए। लेकिन ज्यादातर मामलों में, अपने यूजर्स को आइटम्स छुपाने/दिखाने का विकल्प देना समझदारी है, जो classList.toggle() करता है।
CodePen पर सभी कोड प्राप्त करें।
संसाधन
- MDN Web Docs element.classList
