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

您可以使用querySelectorAll 将返回匹配的类列表，然后使用 forEach 循环遍历类 并添加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>