कैसे जांचें कि कोई क्लास जावास्क्रिप्ट के साथ मौजूद है या नहीं

यह जाँचना कि क्या किसी तत्व पर कोई वर्ग मौजूद है, जावास्क्रिप्ट क्लासलिस्ट संपत्ति के साथ सरल और तेज़ है contains() विधि।

आइए सबसे पहले classList.contains() . का उपयोग करने के सामान्य सूत्र पर एक नज़र डालें और फिर हम एक व्यावहारिक . देखेंगे उदाहरण।

classList.contains() सूत्र

var element = document.querySelector("selector")
element.classList.contains("class")

ऊपर दिए गए सामान्य उदाहरण में हम बहुमुखी querySelector() . का उपयोग करते हैं हमारे लक्ष्य तत्व को उसके चयनकर्ता नाम के माध्यम से खोजने की विधि। चयनकर्ता एक वर्ग चयनकर्ता, तत्व चयनकर्ता या अन्य चयनकर्ता प्रकार हो सकता है।

फिर हम उस तत्व को असाइन करते हैं जो हमें querySelector() . के साथ मिला है हमारे घोषित element . के लिए चर।

फिर हम क्लासलिस्ट प्रॉपर्टी के contains() . को अटैच करते हैं हमारे element . के लिए विधि इसके परिवर्तनीय संदर्भ के माध्यम से। फिर अंदर contains() विधि का तर्क (कोष्ठक के अंदर) हम उस 'वर्ग' का नाम निर्दिष्ट करते हैं जिसे हम जांचना चाहते हैं कि क्या मौजूद है।

सामान्य उदाहरण उबाऊ हैं, आइए व्यावहारिक हो जाएं!

अव्यवस्थित समाचार फ़ीड

ClassList.contains के साथ फ़िल्टरिंग ()
- एक व्यावहारिक उपयोग का मामला

आप कई अलग-अलग श्रेणियों की मिश्रित समाचार फ़ीड वाली वेबसाइट पर जा रहे हैं। लेकिन आप केवल तकनीक के बारे में पढ़ने में रुचि रखते हैं।

अव्यवस्थित समाचार फ़ीड ईशनिंदा हैं। आइए classList.contains() . का उपयोग करके अन्य सभी श्रेणियों को फ़िल्टर करें विधि।

सबसे पहले, आइए कुछ HTML जोड़ें ताकि हमारे पास काम करने के लिए कुछ सामग्री हो। फिर हम इसे जल्दी से स्टाइल करेंगे, और जावास्क्रिप्ट पर आगे बढ़ेंगे।

हमारी समाचार फ़ीड के लिए 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 सामग्री के लिए हमारे पास है:

• एक बड़ा शीर्षक।
• विभिन्न श्रेणियों के साथ एक समाचार फ़ीड।
• न्यूज फीड के बाहर, हमारे पास टेक्नोलॉजी नामक एक बटन है। यह वह बटन है जिसका उपयोग हम सभी गैर-तकनीकी विषयों को टॉगल (छिपाने/दिखाने) के लिए करेंगे।

जाहिर है, ऊपर दिए गए हमारे समाचार फ़ीड उदाहरण में केवल कुछ समाचार आइटम हैं (उदाहरण के लिए), इसलिए यह अव्यवस्थित नहीं लगता है। लेकिन एक वास्तविक मिश्रित समाचार फ़ीड प्रत्येक समाचार श्रेणी से असंख्य लेख होंगे, फ़ीड में बाढ़ आ जाएगी। तभी फ़िल्टरिंग बटन उपयोगी होते हैं।

सीएसएस स्टाइलिंग

.js-hide . को छोड़कर, निम्नलिखित सभी CSS कॉस्मेटिक और वैकल्पिक हैं वर्ग, जो एक सहायक वर्ग है जिसका उपयोग हम अगले खंड में जावास्क्रिप्ट के साथ करेंगे।

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 पर चलते हैं!

जावास्क्रिप्ट

निम्नलिखित कोड को अपनी 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]
• लूप के अंदर, हम एक सशर्त अगर स्टेटमेंट जोड़ते हैं जो कहता है:"यदि सूची में से कोई भी आइटम हमने अभी-अभी के माध्यम से पुनरावृत्त किया है नहीं .category-technology . वर्ग शामिल करें — फिर .js-hide . के साथ classList.toggle विधि चलाएँ उन वस्तुओं पर कक्षा।
• आखिरी पंक्ति में, हम addEventListener() . संलग्न करते हैं हमारे बटन तत्व के लिए विधि। हम ईवेंट श्रोता को 'क्लिक' ईवेंट सुनने के लिए कहते हैं। जब बटन पर क्लिक किया जाता है, तो यह showCategoryTechnology() . को कॉल करता है फ़ंक्शन, जो पूरे कोड ब्लॉक को चलाता है जो इस टॉगलिंग सुविधा को संभव बनाता है।

! प्रतीक (लॉजिकल ऑपरेटर) जिसे हम allNewsCategories[i] के सामने रखते हैं वह है जो हमारे if . के "नहीं" भाग को संभालता है बयान। अगर आप ! हटाते हैं तो हमारा कोड इसके विपरीत करेगा जो अभी करता है।

हम classList.remove() . का भी इस्तेमाल कर सकते थे हमारे अवांछित समाचारों को हटाने के लिए। लेकिन ज्यादातर मामलों में, हमारे उपयोगकर्ताओं को आइटम छिपाने/दिखाने का विकल्प देना समझ में आता है, जो कि classList.toggle() करता है।

कोडपेन पर सभी कोड प्राप्त करें।

संसाधन

• एमडीएन वेब डॉक्स element.classList