หลายองค์ประกอบพร้อมปุ่มแสดงผลใน JavaScript

สมมติว่าตอนนี้เรามีหลายย่อหน้าและแต่ละย่อมามีปุ่มของตัวเองสำหรับการซ่อน:

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 นั้น นั่นคือสิ่งที่เราจะ toggle มาทำให้เป็นไปตามที่อธิบาย:

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');
  });
}