Spring Boot+Thymeleaf场景下用jQuery获取span值失败求助

你遇到的问题核心在于：<span> 不是表单元素，jQuery的 .val() 方法仅适用于获取表单控件（如 <input>、<select> 等）的value值，对于span标签，即使通过Thymeleaf的 th:value 渲染出了value属性，.val() 也无法正确读取它。

解决思路1：使用自定义data属性（推荐） #

HTML规范里，span这类元素并不原生支持value属性，更规范的做法是用data-*自定义属性来存储数据：

修改你的Thymeleaf代码：

<span th:switch="${cost.achitat}" class="pull-right">
    <span th:case='true' class="btn btn-xs btn-default">
        <!-- 用data-cost-id存储ID值 -->
        <span class="glyphicon glyphicon-remove" aria-hidden="true" th:data-cost-id="${cost.cost_id}"></span>
    </span>
    <span th:case='false' class="btn btn-xs btn-default">
        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
    </span>
</span>

然后修改jQuery代码，通过.data()方法获取：

$(document).ready(function(){
    $('.glyphicon.glyphicon-remove').click(function(){
        var t = $(this).data('cost-id'); // 对应data-cost-id属性
        alert(t);
    });
});

解决思路2：直接读取value属性（适配现有代码） #

如果你不想修改HTML结构，也可以直接通过.attr('value')来获取span上的value属性：

$(document).ready(function(){
    $('.glyphicon.glyphicon-remove').click(function(){
        var t = $(this).attr('value');
        alert(t);
    });
});

额外验证步骤 #

调试时可以右键页面→查看源代码，确认对应span标签是否已经正确渲染出value或data-cost-id属性，比如应该看到类似：

<span class="glyphicon glyphicon-remove" aria-hidden="true" value="123"></span>

或者

<span class="glyphicon glyphicon-remove" aria-hidden="true" data-cost-id="123"></span>

如果没有渲染出来，再检查Thymeleaf的变量传递（不过你说th:text能正常显示，大概率数据传递是没问题的）。

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