การรับ DOM elements โดยไม่ซ้ำกัน

สมมติว่าเรามีย่อหน้าและปุ่ม:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

<button>click me</button>

ให้ผู้ใช้คลิกที่ย่อหน้าเหล่านี้ ตามลำดับใดก็ได้ มาทำให้ เมื่อกดปุ่มที่ท้ายแต่ละ ย่อหน้าที่ถูกคลิก จะมีเครื่องหมายอัศเจรีย์เพิ่มเข้ามา มาแก้โจทย์นี้ ด้วย Set

เริ่มกันเลย ก่อนอื่นมารับ element ของเรา ไว้ในตัวแปร:

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

สร้างคอลเลกชัน Set ใหม่:

let set = new Set;

วนลูปผ่านย่อหน้าทั้งหมดและเพิ่ม ตัวจัดการเหตุการณ์คลิกให้พวกมัน:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		
	});
}

มาทำให้เมื่อคลิกที่ย่อหน้า จะเพิ่ม ย่อหน้านี้เข้าไปในคอลเลกชัน:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		set.add(this);
	});
}

เนื่องจากเราใช้คอลเลกชัน Set การคลิกลงบนย่อหน้าซ้ำจะไม่ทำให้ เพิ่มย่อหน้าที่ซ้ำเข้าไป

มาทำให้เมื่อคลิกที่ปุ่ม ให้วนผ่าน เนื้อหาของคอลเลกชันของเราและเพิ่มเครื่องหมายอัศเจรีย์ ที่ท้ายแต่ละย่อหน้า:

button.addEventListener('click', function() {
	for (let elem of set) {
		elem.textContent = elem.textContent + '!';
	}
});

มีย่อหน้าและปุ่ม ผู้ใช้คลิก ที่ย่อหน้าเหล่านี้ตามลำดับใดก็ได้ จงทำให้ เมื่อกดปุ่มที่ท้ายแต่ละย่อหน้า ที่ถูกคลิก จะมี เครื่องหมายอัศเจรีย์เพิ่มเข้ามา