在Thymeleaf和Spring Boot中,JavaScript无法按预期工作 [英] JavaScript doesn't work as expected in Thymeleaf and Spring Boot
本文介绍了在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);
})
这篇关于在Thymeleaf和Spring Boot中,JavaScript无法按预期工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文