我正在学习Java与Sping Boot 和Thymeleaf，所以我正在创建一些视图，我遇到了一些挑战.我想创建一个切换按钮“Pendente”和“Recebido”，但现在，我试图把选项“Cancelado”，但我遇到了一些广告.

<div class="row mb-3">
            <label for="statusCodes" class="col-sm-2 col-form-label"
              >Status</label
            >
            <div class="col-sm-2">
              <button
                type="button"
                id="toggleButton"
                class="btn btn-toggle btn-pendente"
                data-value="PENDENTE"
              >
                Pendente
              </button>
              <input
                type="hidden"
                name="statusCodes"
                id="statusCodes"
                value="PENDENTE"
              />
            </div>
          </div>

这是我的div，之前运行得很好。

$(function () {
    $("#toggleButton").on("click", function () {
      $(this).toggleClass("btn-pendente btn-recebido btn-cancelado");
      if ($(this).hasClass("btn-pendente")) {
        $(this).text("Pendente");
        $("#statusCodes").val("PENDENTE");
      } else if ($(this).hasClass("btn-recebido")) {
        $(this).text("Recebido");
        $("#statusCodes").val("RECEBIDO");
      } else if ($(this).hasClass("btn-cancelado")) {
        $(this).text("Cancelado");
        $("#statusCodes").val("CANCELADO");
      }
    });
  });

我想象这将是很容易添加一个类按钮，但当我这样做，当点击“Pendente”按钮，更改为“Recebido”，但与“取消”的风格

.btn-pendente {
  width: 140px;
  color: orange !important;
  background-color: transparent;
  border: 2px solid orange !important;
}

.btn-recebido {
  width: 140px;
  color: #28a745;
  background-color: transparent;
  border: 2px solid #28a745;
}

.btn-cancelado {
  width: 140px;
  color: red;
  background-color: transparent;
  border: 2px solid red;
}

这是我在这里的第一个问题，为某事感到抱歉;）