求助实现登录成功后Login按钮切换为Logout按钮及登出重置功能

一、修改登录函数，添加按钮切换逻辑 #

在登录成功的分支里，加入按钮切换代码，把「Login」按钮改成「Logout」按钮，并绑定登出事件：

function login(username = "", password = "") {
  username = $(`#txtUsername`).val();
  password = $(`#txtPassword`).val();

  let indexOfUser = users.findIndex((u) => {
    return u.username == username && u.password == password && !u.isDeleted;
  });

  if (indexOfUser == -1) {
    return alert(`User not found`);
  }

  // 登录成功后的原有逻辑
  $("#txtUsername").val(username).attr('readonly', true);
  $("#txtPassword").val(password).attr('readonly', true);
  user = users[indexOfUser];
  showUsers(indexOfUser);

  // 新增：切换为Logout按钮
  const loginBtn = $("#btnLogin");
  loginBtn.text("Logout")
         .removeClass("btn-outline-primary")
         .addClass("btn-outline-danger")
         .off("click")
         .on("click", logout);
}

二、编写登出函数，重置状态 #

新增logout函数，处理登出后的输入框重置和按钮还原：

function logout() {
  // 重置输入框：移除只读限制并清空内容
  $("#txtUsername").attr('readonly', false).val("");
  $("#txtPassword").attr('readonly', false).val("");

  // 还原为Login按钮
  const logoutBtn = $("#btnLogin");
  logoutBtn.text("Login")
           .removeClass("btn-outline-danger")
           .addClass("btn-outline-primary")
           .off("click")
           .on("click", login);

  // 清空当前用户状态（如果有全局user变量）
  user = null;
}

三、初始化按钮事件 #

确保页面加载完成后，给「Login」按钮绑定登录事件：

$(document).ready(function() {
  $("#btnLogin").on("click", login);
});

关键说明 #

• 使用.off("click")是为了清除之前绑定的事件，避免重复触发问题
• 切换按钮的Bootstrap类名（btn-outline-primary → btn-outline-danger）是为了通过视觉差异区分登录/登出状态
• 登出时移除输入框的readonly属性并清空内容，恢复到可登录的初始状态

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