javascript - 点击不同区域并隐藏div

Question

我正在尝试在输入上方设置一个带有一些支持者的表单。问题是 - 一旦焦点转移到另一个字段，我如何隐藏支持者？

代码片段将帮助您理解我的困难。

先谢谢你，若昂

var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var upholder = document.getElementsByClassName("upholder");
var lol = document.getElementById("row-normal-3");

for (i = 0; i < upholder.length; i++) {
    upholder[i].classList.add("hide");
}

inputs.forEach(function slideUp(ipt, index) {
    ipt.addEventListener("click", function slideUpTwo() {
        upholder[index].classList.remove("hide");
        upholder[index].classList.add("show");
        upholder[index].innerHTML = list[index];
    })
})

.show {
  display:flex;
}

.hide {
  display:none;
}

<div class="le-form">
                    <form method="POST">
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="text" name="name" placeholder="Your name">
                       </div>
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
                       </div>
                       <div class="le-input">
                           <div class="upholder"></div>
                           <input class="inpt" type="text" name="phone" placeholder="Your phone number">
                       </div>
                        <input type="submit" value="Send" class="form-btn">
                    </form>
                </div>

Answer 1

您可以先隐藏所有这些，然后再将类更改应用到特定的。

var inputs = Array.prototype.slice.call(document.querySelectorAll(".inpt"));
var list = ["YOUR NAME", "YOUR E-MAIL ADDRESS", "YOUR PHONE NUMBER"];
var upholder = document.getElementsByClassName("upholder");
var lol = document.getElementById("row-normal-3");

for (i = 0; i < upholder.length; i++) {
  upholder[i].classList.add("hide");
}

inputs.forEach(function slideUp(ipt, index) {
  ipt.addEventListener("click", function slideUpTwo() {
    hideAllLabels();

    upholder[index].classList.remove("hide");
    upholder[index].classList.add("show");
    upholder[index].innerHTML = list[index];
  })
})

var hideAllLabels = function() {
  for (i = 0; i < upholder.length; i++) {
    upholder[i].classList.remove("show");
    upholder[i].classList.add("hide");
  }
}

.show {
  display: flex;
}

.hide {
  display: none;
}

<div class="le-form">
  <form method="POST">
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="name" placeholder="Your name">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="email" name="_replyto" placeholder="Your e-mail address">
    </div>
    <div class="le-input">
      <div class="upholder"></div>
      <input class="inpt" type="text" name="phone" placeholder="Your phone number">
    </div>
    <input type="submit" value="Send" class="form-btn">
  </form>
</div>