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用于此任务。这是我的解决方案。我将在下面解释。

(?:\[@[A-Za-z0-9]+\])

以上是我的代码。您会注意到有两个PHP if语句和一个变量。变量将存储问号和x后面的链接中的内容，如果链接是：nameoffile.php？x = signin ，则$ x将存储登录信息。 $ _GET检查是否在链接中存储了一些东西，例如：nameoffile.php？ x = signin。在这种情况下，它正在检查x存储的内容。我们的php中的变量$ x存储了我们链接中存储的x。因此，如果x = signin，if语句很容易解释，反之亦然。如果您不了解php并感到困惑，请查阅get（检查存储内容的东西）here和if语句检查here的引用。评论您有任何问题。

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 个答案: