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

Question

JavaScript在thymelaf中不起作用。

在Spring Boot Thymelaf中，首先可以打开模态。但是第二，第三。。。事物不能打开模态。

每个事物都有className，但只有第一个事物可以打开modal。

我认为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);

请帮我

Answer 1

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

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