Question

可以在按钮点击上逐个显示文本字段。最初所有文本字段的可见性都被隐藏但是当单击按钮时，Textfields应该一个接一个地显示，属性应该变为Visible ??

这是我到目前为止所尝试的内容

function myFunction() {

        for(var v=1;v<=4;v++){

            if(v==2){document.getElementById("b").style.visibility = "visible";}
            if(v==3){document.getElementById("c").style.visibility = "visible";}
            if(v==4){document.getElementById("d").style.visibility = "visible";}


        }
    }

当我点击按钮

时显示所有文本字段

Answer 1

以下内容应该完全符合您的要求：

＆＃13;

function showFields() {
  // The following will only select the first hidden input element
  let nextHiddenInput = document.querySelector('div.textfields > input[class=hidden]');

  // Continue until no more hidden inputs are found
  if(nextHiddenInput)  {
    // Remove 'hidden' from its css classes
    nextHiddenInput.classList.remove('hidden');
    // 500 is the time it takes in millis for the next field to appear
    setTimeout(showFields, 500);
  }
}

// You could also use this function
function showFieldsAlternative() {
  function show(element) { // private method
     if(element) {
        element.classList.remove('hidden');
        /* If you remove the following line, an input will 
         appear every time you click on the button */
        setTimeout(show, 500, element.nextElementSibling);
     }
  }
  let firstHiddenInput = document.querySelector('div.textfields > input[class=hidden]');
  show(firstHiddenInput);
}

// Or using setInterval instead of setTimeout
function showFieldsUsingInterval() {
  let interval = setInterval(() => {
    let nextHiddenInput = document.querySelector('div.textfields > input[class=hidden]');
    if(nextHiddenInput) {
      nextHiddenInput.classList.remove('hidden')
    } else // Stop interval when no more hidden fields are found
      clearInterval(interval);
  }, 500);
}

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Textfield One by one</title>
      <style>
      .textfields > input {
        display: block;
        margin: 0.5em 0;
      }
      .hidden {
         display: none !important;
      }
      </style>
    </head>
    <body>
    <div class="textfields">
        <input type="text" class="hidden" />
        <input type="text" class="hidden" />
        <input type="text" class="hidden" />
        <input type="text" class="hidden" />
    </div>
    <button onclick="showFields()">Show Fields</button>
    </body>
    </html>

＆＃13;

Answer 2

我想你最初要隐藏字段，并且想要在单击按钮后显示。我已经使用了jquery，因为你已经在你的问题中标记了Jquery。

<p class="hidden">
a
</p>
<p class="hidden">
b
</p>
<p class="hidden">
c
</p>
<p class="hidden">
d
</p>

<button id="button">
Click Me
</button>

CSS

.hidden {
  display: none;
}

JS

$("document").ready(function() {
    $("#button").on('click',function() {
    $("p").removeClass('hidden')
  });
})

这是工作小提琴：

https://jsfiddle.net/awLs2uby/

Answer 3

您的解决方案无效的原因是：

点击第一个按钮后，for循环就会结束因此，变量v将等于 4

    // it will have changed from 1 through 4 already

这样可以立即显示所有元素。

解决方案：

可以使用Closures

解决此问题

简而言之：
闭包是一个可以访问父作用域的函数，即使在父函数关闭后也是如此。

示例

 var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();

add();
add();
add();

// the counter is now 3

示例解析

变量add被赋予自调用函数的返回值。

自调用函数只运行一次。它将计数器设置为零（0），并返回一个函数表达式。

这种方式add成为一种功能。 “精彩”部分是它可以访问父范围中的counter。

这称为 JavaScript闭包。它使函数可以拥有“私有”变量。

关闭的应用

检查 JSFiddle 此处：https://jsfiddle.net/theAccountant/v5we76z3/12/

HTML

<button type="button" class="btn btn-primary center-block" id="nextButton">NEXT</button>

<form>
  <div class="form-group" id="username">
    <label for="exampleInputUsername1">Username</label>
    <input type="text" class="form-control" id="exampleInputUsername1" placeholder="Username">
  </div>

  <div class="form-group form1" id="email">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group form1" id="password">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>

  <button type="submit" id="submit" class="btn btn-primary form1">Submit</button>
</form>

JS：

$(document).ready(function() {

  $(".form1").fadeOut();

  var add = (function() {
    var counter = 0;
    return function() {
      return counter += 1;
    }
  })();

  function addVisibility(counter) {
    switch (counter) {
      case 1:
        $("#email").fadeIn();
        break;
      case 2:
        $("#password").fadeIn();
        break;
      case 3:
        $("#submit").fadeIn();
        break;
      default:
    }
  }

  $("#nextButton").click(function() {
    addVisibility(add());
  });

});

Answer 4

这是一个示例，你可以通过setInterval函数简单地实现这一点，不需要循环。

<!DOCTYPE html>
<html>
<body>
 <p id="1" style="display: none;">a</p>
 <p id="2" style="display: none;">b</p>
 <p id="3" style="display: none;">c</p>
 <p id="4" style="display: none;">d</p>
<script>
var i=1;
setInterval(function(){document.getElementById(i).style.display = "block";i++; if(i==4){clearInterval()}},1000);
</script>
</body>
</html>

在javaScript中逐个显示文本字段

4 个答案: