如何使用Css display：none与javascript className删除输入字段

Question

我想在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 );

Codepen： https ：//codepen.io/djtush/pen/VNXrgx

Answer 1

我建议您将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 = 登入，$ x将存储登入。 $ _GET检查是否在链接中存储了一些东西，例如：nameoffile.php?。 x =登录。 在这种情况下，它正在检查x存储的内容。 我们的php中的变量$ x存储了我们链接中存储的x。 因此，如果x = signin，if语句很容易解释，反之亦然。 如果您不了解php并感到困惑，请在此处查阅有关get（用于检查是否存储内容的东西）和if语句在此处进行检查的参考。 评论您有任何问题。

Answer 2

您确实应该为要定位的元素使用一些类或ID。 如果您随时更改元素的顺序，则此代码将不再按您期望的方式工作。

另外，我不了解setTimeout的原因，但根据示例代码，我保留了它。

另外，示例HTML中有3个容器，而Codepen示例中有3个容器。

如果您坚持不使用类或ID，则可以这样做：

function log_in () {
    setTimeout( function() {

        let inputs =  document.getElementsByClassName(input-container);

        for(let d=0; d<inputs.length; d++) {
            if (d == 0 || d == 2) { // mark the index of those which should be visible
                inputs[d].className.remove('d_none');
            } else { // the rest will become hidden
                inputs[d].className.add('d_none');
            }
        }
    }
}, 200 );

如何使用Css display：none与javascript className删除输入字段

问题描述

2 个解决方案

解决方案1
0 2019-04-20 17:02:25

解决方案2
0 2019-04-21 20:07:09

如何使用Css display：none与javascript className删除输入字段

问题描述

2 个解决方案

解决方案1 0 2019-04-20 17:02:25

解决方案2 0 2019-04-21 20:07:09

解决方案1
0 2019-04-20 17:02:25

解决方案2
0 2019-04-21 20:07:09