为什么我的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 }?>

JS

document.querySelector('.showBtn').addEventListener('click', () => {
    alert("test");
    })

所有<td>按钮都应发出警报，但仅在第一个按钮中有效。 有人可以启发我吗？

Answer 1

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 2

您可以使用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 3

根据MDN：

Document方法querySelector（）返回文档中与指定选择器或选择器组匹配的第一个Element。

如果您有多个按钮共享“ showBtn”类，则可以使用querySelectorAll来返回列表中的每个按钮。 然后，您可以遍历该列表以将事件侦听器添加到每个侦听器。

有关更多信息，请参见MDN页面中的querySelectorAll 。

Answer 4

querySelectorAll

用于选择多Dom元素

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

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


elements.forEach((el)=>{

el.onclick=function(){

el.style.color='red';
console.log(el)
}
});