জাভাস্ক্রিপ্ট সহ একটি ক্লাস বিদ্যমান কিনা তা কীভাবে পরীক্ষা করবেন

JavaScript classList প্রপার্টির contains() দিয়ে একটি এলিমেন্টে ক্লাস আছে কিনা তা পরীক্ষা করা সহজ এবং দ্রুত। পদ্ধতি।

চলুন প্রথমে classList.contains() ব্যবহার করার জন্য জেনেরিক সূত্রটি দেখে নেওয়া যাক এবং তারপর আমরা একটি ব্যবহারিক দেখব ব্যবহারের ক্ষেত্রে.

classList.contains() সূত্র

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

উপরের জেনেরিক উদাহরণে আমরা বহুমুখী querySelector() ব্যবহার করি নির্বাচক নামের মাধ্যমে আমাদের লক্ষ্য উপাদান খুঁজে বের করার পদ্ধতি। নির্বাচক একটি শ্রেণি নির্বাচক, উপাদান নির্বাচক বা অন্য নির্বাচক প্রকার হতে পারে।

তারপরে আমরা querySelector() এর সাথে যে উপাদানটি পেয়েছি তা বরাদ্দ করি আমাদের ঘোষিত element-এ পরিবর্তনশীল।

তারপর আমরা classList প্রপার্টির 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 কন্টেন্টের জন্য আমাদের আছে:

• একটি বড় শিরোনাম।
• বিভিন্ন বিভাগ সহ একটি নিউজ ফিড।
• নিউজ ফিডের বাইরে, আমাদের প্রযুক্তি নামে একটি বোতাম রয়েছে। এই বোতামটি আমরা সমস্ত অ-প্রযুক্তি বিষয় টগল (লুকান/দেখা) করতে ব্যবহার করব৷

স্পষ্টতই, উপরের আমাদের নিউজ ফিডের উদাহরণে শুধুমাত্র কয়েকটি সংবাদ আইটেম রয়েছে (দৃষ্টান্তের উদ্দেশ্যে), তাই এটি বিশৃঙ্খল দেখায় না। কিন্তু একটি বাস্তব মিশ্র সংবাদ ফিড প্রতিটি সংবাদ বিভাগ থেকে অগণিত নিবন্ধ থাকবে, ফ্লাডিং থিফিড। যখন ফিল্টারিং বোতামগুলি দরকারী।

CSS স্টাইলিং

.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 স্টাইলশীটে ক্লাস করুন এবং চলুন জাভাস্ক্রিপ্টে চলে যাই!

জাভাস্ক্রিপ্ট

আপনার 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)

জাভাস্ক্রিপ্ট কোড কিভাবে কাজ করে

• প্রথমে আমরা 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() করে।

কোডপেনে সমস্ত কোড পান৷

সম্পদ

• MDN ওয়েব ডক্স element.classList