我想使用带有 CSS 的 Javascript 删除 HTML 表单中的一些输入字段。我的想法是我想在同一页面上进行注册和登录，
HTML:
<h3 class="login">
<a class="tab1" href="#login-tab" onclick ="log_in()"> Log In </a>
</h3>
</div>
//FORM FIELD
<div class="input-container">
<input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>
<div class="input-container">
<input class="input-field" type="text" placeholder="Enter Your Email"
name="email">
</div>
<div class="input-container">
<input class="input-field" type="password" placeholder="Enter Your
Password" name="psw">
</div>
CSS:
d_none {display:none;}
Javascript:
function log_in () {
let inputs = document.querySelectorAll(.input-container);
setTimeout( function() {
for( let d= 0; d < inputs.length ; d++ ) {
if (d == 0){
document.querySelectorAll('.input-container')[d].className = "input-container d_block";
}
else if (d == 2) {
document.querySelectorAll('.input-container')[d].className =
"input-container d_block";
}
else {
document.querySelectorAll('.input-container')[d].className= "input-container d_none";
}
}
},200 );
最佳答案
我建议您使用 php 来完成这项任务。这是我的解决方案。我将在下面解释。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sign In</title>
</head>
<body>
<a href="?x=signin">Sign In</a><a href="?x=signup">Sign Up</a>
<?php $x = $_GET['x']; if ($x == "signin"){ ?>
<form class="" action="" method="post">
<h1>Sign In</h1>
<input type="text" name="" placeholder="username">
<input type="text" name="" placeholder="password">
</form>
<?php } $x = $_GET['x']; if ($x == "signup"){?>
<form class="" action="" method="post">
<h1>Sign Up</h1>
<input type="text" name="" placeholder="create username">
<input type="text" name="" placeholder="create password">
</form>
<?php } ?>
</body>
</html>
上面是我的代码。您会注意到有两个 PHP if 语句和一个变量。该变量存储问号和 x 之后的链接中的内容，如果链接是这样的:nameoffile.php?x=signin，$x 将存储登录。 $_GET 检查是否有任何东西存储在链接中，例如:nameoffile.php?x=signin。在这种情况下，它正在检查 x 存储的内容。我们的 php 中的变量 $x 正在存储我们链接中的 x 所存储的内容。所以如果 x = signin if 语句是非常 self 解释的，它会显示 signin 反之亦然。如果您不了解 php 并且感到困惑，请查看 get 的引用资料(检查存储内容的东西)here和 if 语句检查 here .评论您的任何问题。
关于javascript - 如何使用 Css 显示 :none with javascript className 删除输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55775306/