JavaScript-এ এলিমেন্টে ক্লাস টগল করা একটি ডেভেলপার হিসেবে শিখতে পারেন সবচেয়ে প্র্যাক্টিক্যাল স্কিলগুলোর একটা। টগলিং ব্যবহার হয় অনেক জিনিসে, যেমন মেনু শো/হাইড, সার্চ ফিল্টার অ্যাড/রিমুভ, এবং সোশ্যাল মিডিয়া বাটন (লাইক, থাম্বস আপ ইত্যাদি)।
টগলিং আরও জটিল হতে হয় না কয়েক লাইন কোডের চেয়ে, কনটেক্সটের ওপর ডিপেন্ড করে। আজ আমরা একটি সিম্পল পদ্ধতি শিখবো না কেবল টগলিং বরং JavaScript শিখতে যেন সাধারণ।
HTML স্ট্রাকচার
JavaScript-এ ফাংশনাল জিনিসগুলোতে যাওয়ার আগে, আসুন কিছু HTML এলিমেন্ট সেট আপ করি যাতে আমাদের কিছু থাকে ইন্টারঅ্যাক্ট করার জন্য। আসুন একটি র্যাপার, একটি বাটন, এবং একটি বক্স তৈরি করি।
আপনার HTML ডকুমেন্টের বডি ট্যাগের ভিতরে নিচের কোডটি রাখুন:
<div class="wrapper"> <button class="button">Toggle</button> <div class="box"></div> </div>পেরেন্ট div এলিমেন্ট (র্যাপার) শুধু তাই আছে যাতে এর চাইল্ড এলিমেন্টগুলো (বক্স এবং বাটন) CSS দিয়ে সেন্টার অ্যালাইন করা যায়। এটি কসমেটিক, এবং কাজ করার জন্য প্রয়োজনীয় নয়।
নোট: আপনি যদি CodePen-এর মত অনলাইন কোড এডিটর ব্যবহার করেন, আপনি এই কোডটি HTML ট্যাব উইন্ডোতে যোগ করতে পারেন। তারা বাকি HTML বাকদরদরzę করতে থাকে, বডি ট্যাগসহ।
CSS স্টাইল
পেরেন্ট div এলিমেন্টে একটি .wrapper ক্লাস আছে যেটিতে কিছু Flexbox প্রোপার্টি আছে যা এর চাইল্ড এলিমেন্টগুলো: বক্স এবং বাটন, সেন্টার অ্যালাইন করে। আমি Flexbox-এর কীভাবে এবং কেন যাবো না, সেটি আরেকটি টিউটোরিয়ালের জন্য।
বাটন এবং বক্স কিছু বেসিক স্টাইল ক্লাস পায় কসমেটিক উদ্দেশ্যে।
.wrapper { padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 200px; height: 200px; background-color: #eeeeee; } .button { display: block; text-align: center; font-size: 1.5rem; color: white; background-color: #262422; border-radius: 4px; padding: 1rem 2rem; margin-bottom: 1rem; } .bg-red { background-color: #aa2f18; }এখানে ফোকাস করার গুরুত্বপূর্ণ জিনিস হলো .bg-red ক্লাস যেটিতে CSS background-color প্রোপার্টি আছে ভ্যালু '#AA2F18' (লাল)। এই ক্লাসটি আমরা টগল করব (অ্যাড বা রিমুভ) আমাদের বক্স এলিমেন্টে যখন বাটন এলিমেন্টে ক্লিক করব।
JavaScript ইভেন্ট হ্যান্ডলিং
JavaScript-এ এলিমেন্ট ম্যানিপুলেট করার আগে, আমাদের প্রথমে আমাদের দুটি এলিমেন্টের (বক্স এবং বাটন) রেফারেন্স স্টোর করতে হবে। আমরা সেটি করব দুটি ভেরিয়েবল ডিক্লেয়ার করে, button, এবং box। তারপর দুটি এলিমেন্টকে তাদের রেসপেক্টিভ ভেরিয়েবলে অ্যাসাইন করব।
বক্স এবং বাটন এলিমেন্ট সিলেক্ট করার জন্য যেগুলো আমরা রেফারেন্স স্টোর করতে চাই, আমরা গ্লোরিয়াস querySelector মেথড ব্যবহার করব আমাদের এলিমেন্টদের ক্লাস গ্র্যাব করতে:
let button = document.querySelector(".button"); let box = document.querySelector(".box");এখন যেহেতু আমাদের আমাদের টার্গেট এলিমেন্টগুলোতে রেফারেন্স আছে, আমরা সেগুলো DOM ম্যানিপুলেট করতে পারি, তাদের প্রোপার্টি এবং মেথড অ্যাক্সেস করে। এই কেসে, আমরা একটি ইভেন্ট লিসেনার ব্যবহার করব যা বাটন এলিমেন্টে ক্লিক ইভেন্ট লিসেন করবে। ক্লিক ডিটেক্ট হলে আমরা একটি ফাংশন এক্সিকিউট করব যেটি আমাদের বক্স এলিমেন্টে ব্যাকগ্রাউন্ড কালার টগলিং রান করাবে।
সেটি করতে আমরা addEventListener() মেথড আটাচ করব আমাদের বাটন এলিমেন্টে (ভেরিয়েবল রেফারেন্সের মাধ্যমে)। এই ইভেন্ট লিসেনার মেথডে আমরা দুটি প্যারামিটার ভ্যালু যোগ করব: 'click' (ইভেন্ট টাইপ), এবং function()। আমরা এই উদাহরণে একটি আনোনিমাস (অনামিক) ফাংশন ব্যবহার করব।
তারপর আনোনিমাস ফাংশনের ভিতরে: আমরা JavaScript classList প্রোপার্টির toggle() মেথড আটাচ করব আমাদের বক্স এলিমেন্টে। টগল মেথডের কাজ হলো নির্দিষ্ট .bg-red ক্লাস বা অ্যাড করব বা রিমুভ করব:
button.addEventListener("click", function() { box.classList.toggle("bg-red"); });classList টগল মেথড এভাবে কাজ করে: যদি স্পেসিফাইড ক্লাস টার্গেট এলিমেন্টে ইতিমধ্যে এক্সিস্ট করে, তবে সেটি রিমুভ হয়বে। যদি এক্সিস্ট না করে, তবে সেটি অ্যাড হয়বে।
হয়ে গেলো! আপনি এখন জানেন কীভাবে প্লেইন JavaScript-এ নির্দিষ্ট এলিমেন্টে ক্লাস টগল করতে হয়। আমি এই টিউটোরিয়ালের সকল কোড CodePen-এ আপলোড করেছি।
কোডটি IE10 এবং তার উপরের সব আধুনিক ব্রাউজারের সাথে কম্প্যাটিবল।
