在Thymeleaf和Spring Boot中，JavaScript无法按预期工作

JavaScript在胸腺叶中不起作用。

在春靴百里香中，第一件事就是可以打开模式。但是第二，第三..。无法打开模式。

所有事物都有类名称，但只有第一个事物才能打开模式。

我认为JavaScript只适用于第一件事，而不适用于其他方面。

<tr th:each="board, i : ${boards}">
                        <th scope="row" th:text="${i.count}">1</th>
                        <td>
                            <p class="show" th:text="${board.title}">Title</p>
                            <div class="modal"> .... </modal>
                        </td>
                        <td th:text="${board.writer}">Son</td>
                        <td th:text="${board.createDate}">2022-02-01</td></p>
</tr>

js

function show() {
    document.querySelector(".background").className = "background show";
}

function close() {
    document.querySelector(".background").className = "background";
}

document.querySelector(".show").addEventListener("click", show);
document.querySelector(".close").addEventListener("click", close);

请帮帮我

---

解决方案

使用您的代码，您只是将事件侦听器添加到类".show"的第一个元素。您应该将事件侦听器添加到类的所有成员。以下代码应该可以完成这项工作：

document.querySelectorAll('.show').forEach(item => {
  item.addEventListener('click', show);
})