html - 无法使用 JQuery 更改 Html 元素之间的文本

Question

我有下面的JQuery代码。我在第二个if语句中将按钮元素之间的文本从+更改为x 。现在，当按钮显示x时，我想在第一个if语句中使用将文本更改为+ ，但即使在更改之后按钮仍显示x 。我检查了文本是否已使用console.log()更改为+，它说它已更改为+。但是，为什么结果没有显示它对按钮的影响？$(this).text("+");

let players = [];
let remainingPlayers = 11;

$(".card > button").click(function(e) {
  let removePlayer = "";
  let index = -1;

  if ($(this).text() !== "+") {
    removePlayer = $(this).attr("value");
    index = players.indexOf(removePlayer);
    if (index != -1) {
      $(this).text("+");
      players.splice(index, 1);
      console.log(players);
      console.log($(this).text());
    }
  }

  if (remainingPlayers != 0) {
    remainingPlayers -= 1;
    players.push($(this).attr("value"));
    $(this).text("x");
    $(this).addClass("btn btn-danger button-select-players");
    $("#pl-remain").text(remainingPlayers);
  } else {
    alert("You can't select more players");
    console.log(players);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 col-md-12 col-sm-12">
  <div class="card" style="width: 15rem;">
    <img src="..." class="card-img-top" alt="...">
    <button class="btn btn-success button-select-players" type="button" name="button" value="xyz">+</button>
    <ul class="list-group list-group-flush">
      <li class="first-li list-group-item">Name</li>
      <li class="list-group-item">0</li>
    </ul>
  </div>
</div>

标签： htmljquery