Question

使用一种功能检查用户是否已登录或注销。如果已登录，则会删除登录按钮，并显示注销按钮。如果当前状态已注销，则会显示登录，并删除注销。

它在两个不同的功能loggedIn();和loggedOut();中运行。每个函数都是用三元运算符构建的。

有没有一种方法可以将它们组合成一个可以检查所有条件的函数？像loggedCheck();一样，所以我没有运行两个不同的函数。

只是想提高效率，而不要过度编码。

isLoggedIn = false;

function loggedIn() {
  isLoggedIn == true ? login.style.display = 'none' : login.style.display = 'block';
}

function loggedOut() {
  isLoggedIn == true ? logout.style.display = 'block' : logout.style.display = 'none';
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">




<body onload="loggedIn(); loggedOut();">
  <div class="container py-3">
    <button class="btn btn-md btn-primary" id="login">Log In</button>
    <button class="btn btn-md btn-primary" id="logout">Log Out</button>
  </div>
</body>

Answer 1

做起来更简单：

不需要：
-加载功能
-错误的全局var = isLoggedIn

const LoginBlock = document.getElementById('LoginBlock')
    , bt_LogIn   = document.getElementById('login')
    , bt_LogOut  = document.getElementById('logout')
    
bt_LogIn.onclick=_=> {
  LoginBlock.classList.add('loginOff')
}

bt_LogOut.onclick=_=>  {
  LoginBlock.classList.remove('loginOff')
}

#LoginBlock > button#login { display: block; }
#LoginBlock > button#logout { display: none; }

#LoginBlock.loginOff > button#login { display: none; }
#LoginBlock.loginOff > button#logout { display: block; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<body>
  <div class="container py-3" id="LoginBlock" >
    <button class="btn btn-md btn-primary" id="login">Log In</button>
    <button class="btn btn-md btn-primary" id="logout">Log Out</button>
  </div>
</body>

如果需要：

  if (LoginBlock.classList.contains('loginOff')) { // instead of  your global "isLoggedIn"
     // your code
  }

Answer 2

您可以将它们组合为一个函数，并为每个函数使用三进制。

两个建议：

使用window.onload代替<body onload="...">从HTML中删除JavaScript（关注点分离）
使用document.getElementById()来获取元素，而不要依赖global variables。

isLoggedIn = false;

window.onload = () => {
  document.getElementById("login").style.display = isLoggedIn ? 'none' : 'block';
  document.getElementById("logout").style.display = isLoggedIn ? 'block' : 'none';
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container py-3">
  <button class="btn btn-md btn-primary" id="login">Log In</button>
  <button class="btn btn-md btn-primary" id="logout">Log Out</button>
</div>

Answer 3

我将您的方法略微调整为仅使用一个按钮并适当地更改了textContent：

const [btn] = document.getElementsByTagName('button');
let isLoggedIn = false;

btn.onclick = (e) => {
  isLoggedIn = !isLoggedIn;
  btn.textContent = isLoggedIn ? 'Log Out' : 'Log In';
};

<button>Log In</button>

Answer 4

您可以使用像这样的单个功能

let isLoggedIn = false;

const login = document.getElementById('login')
const logout = document.getElementById('logout')

login.addEventListener('click', handleLogin)
logout.addEventListener('click', handleLogin)

function handleLogin() {
  isLoggedIn = !isLoggedIn;

  if (!isLoggedIn) {
    login.style.display = 'block';
    logout.style.display = 'none';
    return
  }
  
  login.style.display = 'none';
  logout.style.display = 'block';
}

<body onload="handleLogin();">
  <div class="container py-3">
    <button class="btn btn-md btn-primary" id="login">Log In</button>
    <button class="btn btn-md btn-primary" id="logout">Log Out</button>
  </div>
</body>

为什么两个if语句不能在一个函数中起作用？

4 个答案: