জাভাস্ক্রিপ্টে অনেকগুলি উপাদান বোতাম সহ প্রদর্শন করুন

এখন ধরুন আমাদের কাছে অনেকগুলি অনুচ্ছেদ আছে এবং প্রতিটির নিজস্ব লুকানোর বোতাম আছে:

html<p>1</p><button>toggle</button>
<p>2</p><button>toggle</button>
<p>3</p><button>toggle</button>

এটি এমনভাবে তৈরি করা যাক যে বোতামে ক্লিক করলে এর সাথে সংশ্লিষ্ট অনুচ্ছেদটি লুকানো বা প্রদর্শিত হবে।

এটি করার জন্য আমাদেরকে কোনোভাবে বোতামগুলিকে আমাদের অনুচ্ছেদের সাথে যুক্ত করতে হবে। এর জন্য বিভিন্ন পদ্ধতি রয়েছে।

প্রথম পদ্ধতি

নিম্নলিখিতভাবে বোতাম এবং অনুচ্ছেদগুলিকে সংযুক্ত করা যাক:

html<p id="elem1">1</p><button data-elem="elem1">toggle</button>
<p id="elem2">2</p><button data-elem="elem2">toggle</button>
<p id="elem3">3</p><button data-elem="elem3">toggle</button>

এখন যেকোনো বোতামে ক্লিক করলে আমরা এর data-elem অ্যাট্রিবিউটের বিষয়বস্তু পড়ব এবং সেই id সহ অনুচ্ছেদটি খুঁজব। সেটিকেই টগল করব। বর্ণিতটি বাস্তবায়ন করা যাক:

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    let elem = document.querySelector('#' + this.dataset.elem);
    elem.classList.toggle('hidden');
  });
}

দ্বিতীয় পদ্ধতি

id এবং data-attributes সেট করা খুব সুবিধাজনক নয়। আসুন এটি এমনভাবে তৈরি করি যে সংযোগটি ক্রমিক নম্বর অনুযায়ী হয়: প্রথম বোতামটি যেন প্রথম অনুচ্ছেদটি লুকায়, দ্বিতীয় বোতামটি - দ্বিতীয়টি এবং আরও অনুরূপ।

বর্ণিতটি বাস্তবায়ন করা যাক:

javascriptlet buttons = document.querySelectorAll('button');
let elems   = document.querySelectorAll('p');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    elems[i].classList.toggle('hidden');
  });
}

তৃতীয় পদ্ধতি

যেমনটি দেখা যাচ্ছে, বোতামের সাথে সংযুক্ত অনুচ্ছেদটি এর বাম পাশের প্রতিবেশী। এটি সংযোগ হিসাবে ব্যবহার করা যেতে পারে:

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    this.previousElementSibling.classList.toggle('hidden');
  });
}