CSS এবং JavaScript ব্যবহার করে ক্লাস নাম অনুযায়ী DIV এলিমেন্ট ফিল্টার করার পদ্ধতি

ভূমিকা

ওয়েব ডেভেলপমেন্টে প্রায়শই ক্লাস নাম অনুযায়ী HTML এলিমেন্টগুলো ফিল্টার বা ছাঁটাই করার প্রয়োজন হয়। এই টিউটোরিয়ালে আমরা CSS এবং JavaScript ব্যবহার করে DIV এলিমেন্টগুলোকে ক্লাস নাম অনুযায়ী ফিল্টার করার একটি সম্পূর্ণ উদাহরণ দেখব।

সম্পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html>
<style>
  .filterElements {
    float: left;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    background-color: rgb(28, 98, 179);
    color: #ffffff;
    width: 100px;
    line-height: 100px;
    text-align: center;
    margin: 2px;
    display: none;
  }
  .show {
    display: block;
  }
  .container {
    margin-top: 20px;
    overflow: hidden;
  }
  .btn {
    border: none;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    outline: none;
    padding: 12px 16px;
    background-color: #d6e5ec;
    cursor: pointer;
  }
  .btn:hover {
    background-color: rgb(157, 209, 211);
  }
  .btn.active {
    background-color: rgb(34, 95, 228);
    color: white;
  }
</style>
<body>
<h1>DIV এলিমেন্ট ফিল্টার উদাহরণ</h1>
<div class="filterBtns">
  <button class="btn active" onclick="filterSelection('all')">সব দেখান</button>
  <button class="btn" onclick="filterSelection('animals')">প্রাণী</button>
  <button class="btn" onclick="filterSelection('fruits')">ফল</button>
</div>
<div class="container">
  <div class="filterElements fruits">কমলা</div>
  <div class="filterElements animals">জিরাফ</div>
  <div class="filterElements animals">চিতা</div>
  <div class="filterElements animals">সিংহ</div>
  <div class="filterElements fruits">পেয়ারা</div>
  <div class="filterElements animals">কুকুর</div>
  <div class="filterElements fruits">কলা</div>
  <div class="filterElements fruits">আম</div>
  <div class="filterElements animals">বলদ</div>
</div>
<script>
  filterSelection("all");
  function filterSelection(c) {
    var x, i;
    x = document.querySelectorAll(".filterElements");
    if (c == "all") c = "";
    Array.from(x).forEach(item => {
      removeActiveClass(item, "show");
      if (item.className.indexOf(c) > -1) addActiveClass(item, "show");
    });
  }
  function addActiveClass(ele, name) {
    var i, arr1, arr2;
    arr1 = ele.className.split(" ");
    arr2 = name.split(" ");
    for (i = 0; i < arr2.length; i++) {
      if (arr1.indexOf(arr2[i]) == -1) {
        ele.className += " " + arr2[i];
      }
    }
  }
  function removeActiveClass(ele, name) {
    var i, arr1, arr2;
    arr1 = ele.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);
      }
    }
    ele.className = arr1.join(" ");
  }
  var filterBtns = document.querySelector(".filterBtns");
  var btns = filterBtns.getElementsByTagName("button");
  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";
    });
  }
</script>
</body>
</html>

কোড ব্যাখ্যা

CSS অংশ

.filterElements - সব ফিল্টারযোগ্য এলিমেন্টের বেস স্টাইল, প্রাথমিকভাবে লুকানো থাকে (display: none)
.show - এই ক্লাস যোগ হলে এলিমেন্ট দৃশ্যমান হয় (display: block)
.btn / .btn.active - ফিল্টার বাটনগুলোর স্টাইলিং

JavaScript অংশ

filterSelection() - মূল ফিল্টার ফাংশন, ক্লাস নাম অনুযায়ী এলিমেন্টগুলো দেখায়/লুকায়
addActiveClass() / removeActiveClass() - হেল্পার ফাংশনগুলো ক্লাস যোগ/বাদ দিতে
ইভেন্ট লিসেনার - বাটন ক্লিকে 액্টিভ ক্লাস টগল করে

কীভাবে কাজ করে

প্রাথমিকভাবে সব এলিমেন্ট লুকানো থাকে
"সব দেখান" বাটনে ক্লিক করলে সব এলিমেন্ট দেখায়
"প্রাণী" বাটনে ক্লিক করলে শুধু animals ক্লাসवाले এলিমেন্টগুলো দেখায়
"ফল" বাটনে ক্লিক করলে শুধু fruits ক্লাসवाले এলিমেন্টগুলো দেখায়

আউটপুট

উপরের কোডটি রান করলে একটি ইন্টারঅ্যাক্টিভ ফিল্টারিং ইন্টারফেস তৈরি হবে যেখানে ব্যবহারকারী বাটন ক্লিক করে কন্টেন্ট ফিল্টার করতে পারবেন।