如果单击登录和注册按钮，我正在尝试切换注册和登录框的可见性。我试图只使用纯 JavaScript。
我写了简单的 html 和 javascript 如下：
<div>
<button class="signin">sign in</button><button class="signup">sign up</button>
<div class="signin-box" style="display: none;">
<form class="signin-form">
<label>username<input></label><label>password<input></label><button type="submit">signin</button>
</form>
</div>
<div class="signup-box" style="display: none;">
<form class="signup-form">
<label>username<input></label><label>password<input></label><button type="submit">signup</button>
</form>
</div>
</div>
JavaScript部分：
var signupButton = document.getElementsByClassName('signup')[0];
var signinButton = document.getElementsByClassName('signin')[0];
var signupBox = document.getElementsByClassName('signup-box')[0];
var signipBox = document.getElementsByClassName('signin-box')[0];
console.log("box: ", signupBox, "button: ",signupButton);
var toggleVisible = function(item){
if (item.style.display === 'none'){
return item.style.display = 'block';
}else{
return item.style.display = 'none';
}
};
window.onload = function(){
signupButton.onclick = toggleVisible(signupBox);
signinButton.onclick = toggleVisible(signipBox);
};
这里的问题是，即使我从未单击过按钮，JavaScript的toggleVisible也会自动激活。
因此，登录框和注册框都获得了 display:block 属性。
我该如何解决这个问题？
您正在调用该函数，而不是将其传入。只需将函数调用包装在匿名函数中即可：
signupButton.onclick = function() {
toggleVisible(signupBox);
};
如果您不关心较旧的浏览器，如果将 JavaScript 放在标记底部<body>并向 CSS 添加规则，则还可以稍微简化代码：
document.querySelector('.signup').addEventListener('click', function() {
document.querySelector('.signup-box').classList.toggle('hidden');
}, false);
document.querySelector('.signin').addEventListener('click', function() {
document.querySelector('.signin-box').classList.toggle('hidden');
}, false);
还有CSS：
.hidden {
display: none;
}
| 归档时间： |
|
| 查看次数： |
5744 次 |
| 最近记录： |