Spring Boot+Thymeleaf多状态切换按钮样式异常求助

DevOps 小满

2026-7-26

问题分析与解决方案

问题根源

你的问题出在JavaScript的toggleClass调用上：$(this).toggleClass("btn-pendente btn-recebido btn-cancelado")。toggleClass会对每个传入的类单独执行「存在则移除，不存在则添加」的操作。初始按钮只有btn-pendente类，第一次点击后：

btn-pendente被移除
btn-recebido和btn-cancelado被添加（因为之前不存在）

此时按钮同时拥有btn-recebido和btn-cancelado两个类，而CSS中.btn-cancelado定义在最后，样式会覆盖.btn-recebido，所以看起来显示的是Cancelado的样式。

修正后的代码

不要用toggleClass同时操作多个状态类，而是按顺序循环切换状态，每次只保留当前状态对应的类：

$(function () {
  // 定义状态顺序，循环切换
  const statuses = [
    { class: "btn-pendente", text: "Pendente", value: "PENDENTE" },
    { class: "btn-recebido", text: "Recebido", value: "RECEBIDO" },
    { class: "btn-cancelado", text: "Cancelado", value: "CANCELADO" }
  ];

  $("#toggleButton").on("click", function () {
    const $btn = $(this);
    // 找到当前状态的索引
    let currentIndex = statuses.findIndex(status => $btn.hasClass(status.class));
    // 切换到下一个状态，循环回到开头
    let nextIndex = (currentIndex + 1) % statuses.length;
    const nextStatus = statuses[nextIndex];

    // 移除所有状态类，添加下一个状态的类
    $btn.removeClass("btn-pendente btn-recebido btn-cancelado")
        .addClass(nextStatus.class)
        .text(nextStatus.text);
    // 更新隐藏输入框的值
    $("#statusCodes").val(nextStatus.value);
  });
});