正在使用检查用户是否已登录或注销的功能。如果已登录，登录按钮被移除并且注销按钮显示。如果当前状态被注销，然后登录显示和注销被去除。
它是在两个不同的功能，运行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>还有更简单的方法：
不需要：
-onload函数
-错误的全局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
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句