使用 querySelectorAll 在几个图标上添加事件侦听器？

Question

I have this problem I want to add a on click event on some icons in UI after the click happens a forEach is triggered how to get a specific icon using querySelectorAll.

 function someFunction() { let [...icon] = document.querySelectorAll('.fas'); icon.addEventListener('click', (e) => { let items = icon.closest('.father').querySelectorAll('.item'); items.forEach((item) => (item.style.display = 'none')); }) } someFunction()

 <div class"father"> <div class="fas">-</div> <div class="item"><p>Text</p></div> <div class="item"><p>Text</p></div> <div class="item"><p>Text</p></div> </div> <div class"father"> <div class="fas">-</div> <div class="item"><p>Text</p></div> <div class="item"><p>Text</p></div> <div class="item"><p>Text</p></div> </div>

Answer 1

What your probably after is something called delegated events.

Instead of attaching the event to each .fas you attach further up the tree, often is a good idea to also use another container to capture these in, below I created another div with class items, you could attach to the document but the less an event has to bubble the better.

ps. also a slight bug in your html <div class"father"> you was missing the = .. <div class="father">

 document.querySelector('.items').addEventListener('click', (e) => { if (e.target.classList.contains('fas')) { for (const i of e.target.closest('.father').querySelectorAll('.item')) i.style.display = 'none'; } });

 <div class="items"> <div class="father"> <div class="fas">-</div> <div class="item"><p>Text</p></div> <div class="item"><p>Text</p></div> <div class="item"><p>Text</p></div> </div> <div class="father"> <div class="fas">-</div> <div class="item"><p>Text</p></div> <div class="item"><p>Text</p></div> <div class="item"><p>Text</p></div> </div> </div>

Answer 2

1. You don't need to destructure icons . You can use forEach on the node list without problems.

2. Your HTML was missing some = signs with the father class.

3. querySelectorAll('.item') not querySelectorAll('.items') .

 function someFunction() { let icons = document.querySelectorAll('.fas'); icons.forEach(icon => { icon.addEventListener('click', (e) => { let items = e.target.closest('.father').querySelectorAll('.item'); items.forEach(item => item.style.display = 'none'); }); }) } someFunction();

 <div class="father"> <div class="fas">-</div> <div class="item"> <p>Text</p> </div> <div class="item"> <p>Text</p> </div> <div class="item"> <p>Text</p> </div> </div> <div class="father"> <div class="fas">-</div> <div class="item"> <p>Text</p> </div> <div class="item"> <p>Text</p> </div> <div class="item"> <p>Text</p> </div> </div>