单击不同区域并隐藏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

之前隐藏所有持有者以显示特定焦点元素upholder.so只需在点击功能中添加forloop

＆＃13;

＆＃13;

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() {

    for (i = 0; i < upholder.length; i++) { //hide all upholder
      upholder[i].classList.add("hide");
    }
    upholder[index].classList.remove("hide");
    upholder[index].classList.add("show");
    upholder[index].innerHTML = list[index];
  })
})

＆＃13;

.show {
  display: flex;
}

.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在将类更改应用于特定类更改之前，您可以先隐藏所有这些内容。

＆＃13;

＆＃13;

panelRights(req, res, next) {
    if (req.decoded && req.decoded._id) {
      let _id = req.decoded._id;
      Panel.findById({_id: _id}, function (err, result) {
        if (err) {
          return res.status(401).send({
            success: false,
            error: 'Unauthorized.'
          });
        }
        if (result.role === 'panel') {
          req.decodedUser = result;
          next();
        } else {
          return res.status(401).send({
            success: false,
            error: 'Unauthorized.'
          });
        }
      });
    } else {
      return res.status(401).send({
        success: false,
        error: 'Unauthorized.'
      });
    }
  }

＆＃13;

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");
  }
}

＆＃13;

.show {
  display: flex;
}

.hide {
  display: none;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

我认为你主要是在寻找

• 如果元素失去焦点则触发的事件
• 一个事件，不仅会在用户点击字段时触发，还会在按tab进入该字段时触发。

我已经重写了您的代码，使用focus代替click设置工具提示，blur删除它。工作很顺利。

以下是HTML为您存储的事件列表：https://developer.mozilla.org/en-US/docs/Web/Events

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("blur", function () {
        upholder[index].classList.add("hide");
        upholder[index].classList.remove("show");
    })

    ipt.addEventListener("focus", 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 4

您可以在显示相对于所选输入的当前值之前隐藏所有持有者。您可以创建一个类似＆＃34; hideAllUpHolders＆＃34;的功能。 如果需要在将焦点放在外部元素上时隐藏所有的持有者（仅在需要时），单独的函数可能很有用。

Answer 5

使用 Array.Map（）的另一种解决方案。

对于upholder，更改来自：

var upholder = document.getElementsByClassName("upholder");

to（将HTML节点集合转换为数组）：

var upholder = [].slice.call(document.getElementsByClassName("upholder"));

对于click事件，请更改：

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

为：

upholder.map(function (el, i) {index === i ? 
        (el.classList.add("show"), el.innerHTML=list[index]) : 
        (el.classList.remove("show"), el.innerHTML="")});

完整解决方案：

＆＃13;

＆＃13;

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

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

＆＃13;

<style type="text/css">
	.show {
		display: flex;
	}

	.hide {
		display: none;
	}
</style>

<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>

＆＃13;

＆＃13;

＆＃13;