JavaScript classList প্রোপার্টির contains() মেথড দিয়ে একটি এলিমেন্টে ক্লাস এক্সিস্ট করে কিনা চেক করা সহজ এবং দ্রুত।
প্রথমে classList.contains()-র জেনেরিক ফর্মুলা দেখি এবং তারপর একটি প্র্যাক্টিক্যাল ইউজ কেস দেখব।
classList.contains() ফর্মুলা
var element = document.querySelector("selector") element.classList.contains("class")উপরের জেনেরিক উদাহরণে আমরা বহুমুখী querySelector() মেথড ব্যবহার করি আমাদের টার্গেট এলিমেন্ট খুঁজে বের করতে এর সিলেক্টর নাম দিয়ে। সিলেক্টর হতে পারে একটি ক্লাস সিলেক্টর, এলিমেন্ট সিলেক্টর, বা অন্য সিলেক্টর টাইপ।
আমরা তারপর querySelector() দিয়ে খুঁজে পাওয়া এলিমেন্টকে আমাদের ডিক্লেয়ার করা element ভেরিয়েবলে অ্যাসাইন করি।
তারপর আমরা classList প্রোপার্টির contains() মেথড আটাচ করি আমাদের element-এ এর ভেরিয়েবল রেফারেন্সের মাধ্যমে। তারপর contains() মেথডের আর্গুমেন্টে (প্যarethেসিসের ভিতরে) আমরা সেই 'class'-এর নাম স্পেসিফাই করি যেটি এক্সিস্ট করে কিনা চেক করতে চাই।
জেনেরিক উদাহরণ নিরস, আসুন প্র্যাক্টিক্যাল হই!
দ্য আনক্লাটার্ড নিউজ ফিড
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 কন্টেন্টে আছে:
- একটি বড় হেডলাইন।
- বিভিন্ন ক্যাটেগরির সাথে একটি নিউজ ফিড।
- নিউজ ফিডের বাইরে, আমাদের একটি বাটন আছে Technology নামে। এই বাটনটি আমরা ব্যবহার করব সব নন-টেকনোলজি টপিক হাইড/শো (টগল) করতে।
স্পষ্টতই, উপরের নিউজ ফিড উদাহরণে শুধু কয়েকটি নিউজ আইটেম আছে (ইলাস্ট্রেশনের জন্য), তাই এটা ক্লাটার্ড দেখাচ্ছে না। কিন্তু একটি বাস্তব মিক্সড নিউজ ফিড-এ প্রতিটি নিউজ ক্যাটেগরি থেকে অসংখ্য আর্টিকেল থাকবে, ফিড ফ্লাড করবে। সেটাই সময় ফিল্টারিং বাটন উপকারী হয়।
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; }শুধু নিশ্চিত করুন যে আপনি আপনার CSS স্টাইলশিটে .js-hide ক্লাসটি যোগ করেছেন এবং 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()ব্যবহার করি আমাদের Technology বাটন এলিমেন্ট গ্র্যাব করতে এর ক্লাস সিলেক্টর.btn-technologyদিয়ে। যা পরে আমাদের ফিল্টারিং ফাংশনের ট্রিগার হিসেবে কাজ করবে। আমরা আমাদের বাটন এলিমেন্টকে একটি ভেরিয়েবলে অ্যাসাইন করি নামbtn-technology। - তারপর আমরা
querySelectorAll()ব্যবহার করি আমাদের সব নিউজ ফিড (.news-feed) আইটেম গ্র্যাব করতে এবং প্রতিটি আইটেম লিংক সিলেক্ট করতে তাদের ক্লাস নাম (.link) দিয়ে। আমরা তারপর সব নিউজ আইটেম লিংককে একটি ভেরিয়েবলে অ্যাসাইন করি নামallNewsCategories। - তারপর আমরা একটি ফাংশন তৈরি করি,
showCategoryTechnology() {..}जिसे আমরা কল করব যখন Technology বাটন ক্লিক হবে। - ফাংশন বডির ভিতরে, আমরা লুপ চালাই সকল আইটেম () নিউজ ফিড এলিমেন্টের ভিতরে এবং সেগুলো একটি অ্যারে
[i]-এ স্টোর করি - লুপের ভিতরে, আমরা একটি কন্ডিশনাল if স্টেটমেন্ট যোগ করি যা বলে: "যদি লিস্টে যেটি আইটেমগুলো আমরা একেবারে ইটারেট করলাম সেগুলো না কন্টেইন করে ক্লাস
.category-technology— তবে সেই আইটেমগুলোর ওপর classList.toggle মেথড রান করাও.js-hideক্লাসের সাথে। - লাস্ট লাইনে, আমরা
addEventListener()মেথড আটাচ করি আমাদের বাটন এলিমেন্টে। আমরা ইভেন্ট লিসেনারকে বলে দেই 'click' ইভেন্ট লিসেন করতে। যখন বাটন ক্লিক হবে, এটিshowCategoryTechnology()ফাংশন কল করবে, যা পুরো কোড ব্লক রান করাবে যা এই টগলিং ফিচারকে সম্ভব করে।
! সিম্বল (লজিক্যাল অপারেটর) যা আমরা allNewsCategories[i] এর সামনে রাখি সেটিই হ্যান্ডেল করে "নট" পার্ট আমাদের if স্টেটমেন্টের। আপনি যদি ! রিমুভ করেন তবে আমাদের কোড করবে ঠিক এর উল্টা।
আমরা classList.remove()ও ব্যবহার করতে পারতাম আমাদের অনবश्यक নিউজ আইটেম রিমুভ করতে। কিন্তু অধিকাংশ কেসে, ইউজারদের হাইড/শো করার অপশন দেয়া সেন্সIBLE, যা classList.toggle() করে।
CodePen-এ সকল কোড পান।
রিসোর্স
- MDN Web Docs element.classList
