为什么我的 addeventlistener 只能按一个按钮工作？

Question

整天被困在这里试图调试我的代码有什么问题。为什么事件侦听器只能在一个按钮中工作？即使我在 querySelector 中使用类。我正在使用 PHP 来迭代我数据库中的所有数据，因此按钮也正在循环。PHP/HTML<?php    foreach ($employees  as $employee) {         ?>    <td><?php echo $employee['name']?></td>    <td>Php. <?php echo $employee['salary']?></td>    <td><?php echo $employee['address']?></td>    <td>    <a href="#" class="btn btn-outline-info showBtn" name="showBtn"     id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View     Employee</a>    </td>    <?php }?>JSdocument.querySelector('.showBtn').addEventListener('click', () => {    alert("test");    })所有人的按钮都<td>应该发出警报，但它只能在第一个按钮中工作。有人可以启发我吗？

Answer 1

您可以使用querySelectorAll它将返回匹配的类列表，然后使用forEach循环遍历classes和添加click事件。工作示例：

document.querySelectorAll('.showBtn').forEach(link => link.addEventListener('click', () => {

  alert("test");

}))

<a href="#" class="btn btn-outline-info showBtn" name="showBtn" 

id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View 

Employee</a> <br/>

<a href="#" class="btn btn-outline-info showBtn" name="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View 

Employee</a><br/>

<a href="#" class="btn btn-outline-info showBtn" name="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View 

Employee</a>

Answer 2

querySelector只检索第一个元素。使用querySelectorAll：

document.querySelectorAll('.showBtn').forEach(btn=>btn.addEventListener('click', () => {

  alert("test");

}))

或者，将单个侦听器添加到所有按钮的父级。

<div id = "body">

<a href="#" class="btn btn-outline-info showBtn" name="showBtn" 

id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View 

Employee</a>

<a href="#" class="btn btn-outline-info showBtn" name="showBtn" 

id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View 

Employee</a>

<a href="#" class="btn btn-outline-info showBtn" name="showBtn" 

id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View 

Employee</a>

</div>

<script>

document.querySelector('#body').addEventListener('click', (e) => {

  if(e.target.tagName === "A") //fire only if it's <a></a>

  alert("test");

})

</script>

Answer 3

用于选择多 Dom 元素

Document 方法 querySelectorAll() 返回一个静态（非活动）NodeList，表示与指定选择器组匹配的文档元素列表。

elements=[...document.querySelectorAll('.showBtn')];

elements.forEach((el)=>{

el.onclick=function(){

el.style.color='red';

console.log(el)

}

});