Spring Boot项目中如何隐藏或显示th:each循环生成的所有div元素

开发者阿泽

2026-9-26

问题解决方法

根因说明

HTML规范要求id属性在单个页面内全局唯一，你通过th:each循环给所有生成的div设置了相同的barList id，DOM选择器默认只会匹配到第一个符合id规则的元素，因此只有第一个div的隐藏生效。

具体修改步骤

1. 替换id为class属性

将循环生成的div的唯一标识从id改为可复用的class：

<button class="category" onclick="showBar()">BAR</button>

<!-- 将id="barList"替换为class="barList" -->
<div class="barList" th:each="m: ${MERCH}" th:if="${m.cat.catId}==1">
<tr>
    <p th:text="${m.getMName()}"></p><br>
    <p th:text="${#numbers.formatInteger(m.price, 1, 'COMMA')}"></p>
</tr>
</div>

2. 修改JS逻辑匹配所有元素

两种实现方式可选：

jQuery版本

function showBar() {
    // 类选择器以.开头，会选中所有class为barList的元素执行隐藏
    $('.barList').hide();
    // 如果需要切换显示/隐藏，可替换为$('.barList').toggle()
}

原生JS版本（无需依赖jQuery）

function showBar() {
    document.querySelectorAll('.barList').forEach(element => {
        element.style.display = 'none';
        // 切换显示/隐藏可以用下面的逻辑
        // element.style.display = element.style.display === 'none' ? 'block' : 'none'
    })
}