JS 函数 addEventListener 仅适用于我的列表的第一个元素

Question

我显示一个用户列表，并在每个用户的末尾添加 2 个按钮，一个用于编辑，另一个用于删除用户，我的大问题是只有列表中第一个元素的按钮起作用。

此代码显示我的列表

<tbody>

            <?php for( $i = 0; $i < count($users->datos); $i++ ): ?>

                <tr>

                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["email"  ]; ?></td>

                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["paterno"]; ?></td>

                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["materno"]; ?></td>

                    <td style="padding: 0 20px;"><?php echo $users->datos[$i]["nombre" ]; ?></td>

                    <td style="padding: 0 20px;">

                        <?php

                        echo preg_replace(PHONE_NUMBER, "($1) $2-$3", $users->datos[$i]["movil"]);

                        ?>

                    </td>

                    

                    <td id="botones">

                        <form id="ed" method="POST">

                            <input  type="hidden" id="token" name="token" value="<?php echo $users->datos[$i]["tokenA"]; ?>">

                            

                            <button type="submit" id="<?php echo $users->datos[$i]["id"]; ?>" class="buttonDelete"><i class="fas fa-trash-alt"></i></button>

                            <button type="submit" id="<?php echo $users->datos[$i]["id"]; ?>" class="buttonEdit"  ><i class="fas fa-edit"     ></i></button>

                        </form>

                    </td>

                </tr>

            <?php endfor; ?>

        </tbody>

这是我的 JavaScript 代码

const formEditDel = document.querySelector('form#ed');

const userDel = formEditDel.querySelectorAll('[class="buttonDelete"]')

const userEdit = formEditDel.querySelectorAll('[class="buttonEdit"]')

eventListeners();

function eventListeners(event) {

    userDel.forEach(button => {

        button.addEventListener('click', markDeleted);

    });

    userEdit.forEach(button => {

        button.addEventListener('click', userEdited);

    });

}

我真的不知道该怎么办，所以任何建议将不胜感激。

Answer 1

由于每一行都包含一个单独的表单，因此使用 id 来选择它们只会选择第一个。所以，你可以替换这个const&nbsp;userDel&nbsp;=&nbsp;formEditDel.querySelectorAll('[class="buttonDelete"]') const&nbsp;userEdit&nbsp;=&nbsp;formEditDel.querySelectorAll('[class="buttonEdit"]')有了这个const&nbsp;userDel&nbsp;=&nbsp;document.querySelectorAll('[class="buttonDelete"]') const&nbsp;userEdit&nbsp;=&nbsp;document.querySelectorAll('[class="buttonEdit"]')或者你可以替换这个<form&nbsp;id="ed"&nbsp;method="POST">&nbsp;...&nbsp;</form>有了这个<form&nbsp;class="ed"&nbsp;method="POST">&nbsp;...&nbsp;</form>然后使用类选择表单const&nbsp;formEditDel&nbsp;=&nbsp;document.querySelector('form.ed');

Answer 2

这是最终的代码const userDel&nbsp; = document.querySelectorAll('.buttonDelete');const userEdit = document.querySelectorAll('.buttonEdit');eventListeners();function eventListeners(event) {&nbsp; &nbsp; userDel.forEach(buttonDel => {&nbsp; &nbsp; &nbsp; &nbsp; buttonDel.addEventListener('click', markDeleted);&nbsp; &nbsp; });&nbsp; &nbsp; userEdit.forEach(buttonEdit => {&nbsp; &nbsp; &nbsp; &nbsp; buttonEdit.addEventListener('click', userEdited);&nbsp; &nbsp; });}