如何用jQuery获取隐藏input的th:value、控制可见性并修改颜色

首先明确一个前提：Thymeleaf 的 th:* 前缀属性是服务端渲染属性，页面渲染完成下发到浏览器后，th:value 会自动转为标准的 value 属性，不需要特殊处理前缀。

实现步骤 #

1. 调整HTML结构

你不需要为循环生成的input加唯一ID，给隐藏input加自定义类、新增一个专门展示状态的标签即可：

<div class="col dividers">
    <h4 class="h-april">April</h4>
    <div th:each="timeline : ${April}">
        <h3 th:text="${timeline.getJobApplications().getTitle()}"></h3>
        <h3 th:text="${timeline.getJobApplications().getCompany}"></h3>
        <!-- 给隐藏input加自定义类方便选择 -->
        <input type="hidden" class="kanban-status-input" th:value="${timeline.getKanbanStatus()}">
        <!-- 新增状态展示标签 -->
        <span class="kanban-status-text"></span>
    </div>
</div>

2. 编写jQuery逻辑

页面DOM加载完成后遍历所有状态输入框，判断值后赋值加样式：

$(function() {
    // 遍历所有隐藏的状态输入框
    $('.kanban-status-input').each(function() {
        // 转为数字避免类型判断误差
        const kanbanStatus = Number($(this).val());
        // 找到同层级的状态展示标签
        const $statusEl = $(this).siblings('.kanban-status-text');

        // 判定状态为1（对应January）
        if (kanbanStatus === 1) {
            // 赋值展示内容
            $statusEl.text('January');
            // 加自定义类设置样式，也可以直接用.css()方法写行内样式
            $statusEl.addClass('january-status');
        }
    })
})

3. 补充CSS样式

.january-status {
    /* 替换为你需要的颜色值即可 */
    color: #16a34a;
    font-weight: 500;
    margin-left: 8px;
}

其他可选方案 #

如果你不想新增展示标签，直接修改input本身显示，也可以用下面的逻辑（不推荐，input为表单元素，不适合做纯展示用）：

$(function() {
    $('.kanban-status-input').each(function() {
        const kanbanStatus = Number($(this).val());
        if (kanbanStatus === 1) {
            $(this).attr('type', 'text').css('color', '#16a34a');
        }
    })
})

内容的提问来源于stack exchange，提问作者rosebarcus