为什么两个 if 语句在一个函数中不起作用？
[英]Why two if statements don't work in one function?
问题描述
Working on a function that checks if a user is logged in or out.
处理检查用户是否登录或注销的功能。 If logged in, Log In button is removed and Log Out button displays.如果已登录，登录按钮被移除并且注销按钮的显示器。 If current state is logged out, then Log In is displayed and Log Out is removed.如果当前状态被注销，然后登录显示和注销被去除。
It's running in two different functions loggedIn();它在两个不同的函数中运行： loggedIn(); and loggedOut();和loggedOut(); . . Each function is built out with ternary operators.每个函数都是用三元运算符构建的。
Is there a way to combine these into one function that checks for all conditions?有没有办法将这些组合成一个检查所有条件的函数？ Like loggedCheck();像loggedCheck(); so I don't have two different functions running.所以我没有运行两个不同的功能。
Just looking to be more efficient and not over-code things.只是希望提高效率而不是过度编码。
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>
4 个解决方案
解决方案1
2 已采纳 2019-12-12 18:35:46
there is more simple to do:有更简单的方法：
with no needs of :不需要：
- onload function - 加载功能
- bad global var = isLoggedIn - 错误的全局变量= 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 you need:如果你需要：
if (LoginBlock.classList.contains('loginOff')) { // instead of your global "isLoggedIn"
// your code
}
解决方案2
1 2019-12-12 18:28:50
You can combine them into a single function and use a ternary for each.您可以将它们组合成一个函数，并为每个函数使用一个三元组。
Two suggestions:两个建议：
- Use
window.onloadinstead of<body onload="...">to remove your JavaScript from the HTML (separation of concerns)使用window.onload而不是<body onload="...">从 HTML 中删除您的 JavaScript（关注点分离） - Use
document.getElementById()to fetch the elements, instead of relying on global variables .使用document.getElementById()来获取元素，而不是依赖于全局变量。
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>
解决方案3
1 2019-12-12 18:41:05
I adjusted your approach slightly to only using one button and changing it's textContent appropriately:我稍微调整了你的方法，只使用一个按钮并适当地更改它的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>
解决方案4
1 2019-12-12 19:11:11
You can use a single function like this您可以使用这样的单个功能
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.