कैसे एलीमेंट फ़िल्टर करें

क्लास नाम के आधार पर डीवी एलीमेंट कैसे फ़िल्टर करें याद करें

फ़िल्टर करने योग्य डीवी एलीमेंट बनाएं

पहला कदम - HTML जोड़ें:

<!-- नियंत्रण बटन -->
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> सभी दिखाएं</button>
  <button class="btn" onclick="filterSelection('cars')"> कार</button>
  <button class="btn" onclick="filterSelection('animals')"> पशु</button>
  <button class="btn" onclick="filterSelection('fruits')"> फल</button>
  <button class="btn" onclick="filterSelection('colors')"> रंग</button>
<div class="filterDiv animals">Cow</div>
<!-- फ़िल्टर करने योग्य एलीमेंट. कृपया ध्यान दें कि कुछ कई क्लास नामों से युक्त हैं (अगर वे कई श्रेणियों के अंतर्गत हैं, तो इन क्लास नामों का उपयोग कर सकते हैं) -->
<div class="container">
  <div class="filterDiv cars">बीएमडब्ल्यू</div>
  <div class="filterDiv colors fruits">ऑरेंज</div>
  <div class="filterDiv cars">वोल्वो</div>
  <div class="filterDiv colors">रेड</div>
  <div class="filterDiv cars">फोर्ड</div>
  <div class="filterDiv colors">ब्लू</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv fruits">Melon</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Banana</div>
  <div class="filterDiv fruits">Lemon</div>
<div class="filterDiv animals">Cow</div>

</div>

दूसरा कदम - सीएसएस जोड़ें:
  .container {
}
ओवरफ्लोट: नहीं;
  .filterDiv {
  फ्लोट: बाईं;
  पृष्ठभूमि-रंग: #2196F3;
  रंग: #ffffff;
  विस्तार: 100px;
  लेक्सटालाइन: 100px;
  मार्गिन: 2px;
  डिस्प्ले: नहीं; /* डिफॉल्ट में छिपाया */
}
/* फिल्टर किए गए एलिमेंट में 'show' वर्ग जोड़ें */
.show {
  डिस्प्ले: ब्लॉक;
}
/* बटन के शैली को सेट करें */
.btn {
  बॉर्डर: नहीं;
  आउटलाइन: नहीं;
  पैडिंग: 12px 16px;
  पृष्ठभूमि-रंग: #f1f1f1;
  कर्सर: पॉइंटर;
}
/* माउस हॉवर पर गोल्डे रंग का पृष्ठभूमि जोड़ें */
.btn:hover {
  पृष्ठभूमि-रंग: #ddd;
}
/* सक्रिय बटन में गहरा पृष्ठभूमि जोड़ें */
.btn.active {
  पृष्ठभूमि-रंग: #666;
  रंग: सफेद;
}

तीसरा कदम - जावास्क्रिप्ट जोड़ें:

फिल्टरसेलेक्शन('all')
फ़ंक्शन फिल्टरसेलेक्शन(c) {
  वार x, i;
  x = डॉक्युमेंट.गेटबायक्लास('filterDiv');
  if (c == "all") c = ";";
  // फ़िल्टर किए गए एलेमेंट को "show" वर्ग (display:block) जोड़ें और अनचयनित एलेमेंट से "show" वर्ग हटाएं
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}
// फ़िल्टर किए गए एलेमेंट को दिखाएं
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}
// अनचयनित एलेमेंट को छुपाएं
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}
// वर्तमान नियंत्रण बटन को गतिविधि वर्ग (उभार) जोड़ें (दिखाएं)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

स्वयं के लिए प्रयोग करें