點擊不同的區域並隱藏div

我正嘗試在輸入框上方設置一些窗體。事情是 - 一旦焦點轉移到另一個領域，我怎麼能隱藏起來？點擊不同的區域並隱藏div

該代碼片段將幫助您瞭解我的困難。

謝謝你在前進，若昂

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>

來源

2017-09-14 João Araújo

是什麼問題？ –

你是什麼意思「隱藏upholders」..你的意思是當你第二次隱藏「你的名字」這樣的文字嗎？並在第3次時隱藏「您的電子郵件地址」。 – MMRahman

在將類更改應用於特定類之前，您可以先隱藏所有類。

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>

來源

2017-09-14 10:01:18 Nope

隱藏之前所有的維護者，以顯示特定的焦點元素upholder.so只需添加forloop點擊功能裏面

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

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

來源

2017-09-14 09:56:29 prasanth

您可以在顯示當前相對於所選輸入之前隱藏所有持股人。你可以創建一個像「hideAllUpHolders」這樣的函數。如果您需要在將焦點賦予外部元素（僅在需要時）時隱藏所有上舉者，則可以使用單獨的函數。

來源

2017-09-14 10:00:41 SkullFlame

我想你主要是尋找

觸發如果元素失去焦點
，做不僅觸發一個事件的事件，當用戶點擊該領域，但他也按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>

來源

2017-09-14 10:02:43 SimonSimCity

使用Array.Map（）另一種解決方案。

對於upholder，改由從：

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

到（HTML轉換節點集合到陣列）：

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

：

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

對於click事件，變發到：

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

完整的解決方案：

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

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

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

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

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

來源

2017-09-14 12:27:00

點擊不同的區域並隱藏div

回答

相關問題