隐藏 <input> 在.show（）之后

Question

希望您能对此有所帮助，因为我是编码新手。 我开始编码myprofile / editprofile页面。 正如您在这张图片中看到的

用户名和密码编辑图片。

我在“名称”和“电子邮件”旁边创建了这两个图标，以在单击时打开这两个输入

<input type="text" id="edit_user"  style="display:none;" placeholder="New name." />
<div class="edit_hover_class"><b><?= $user['name'];  ?> </b><a><img onClick="show1()" src='images/edit-icon.png' /></a></div>
<input type="text" id="edit_pw" name="password"  style="display:none;" placeholder="New email." />
<div class="edit_hover_class"><?= $user['email'];  ?><a><img onClick="show2()" src='images/edit-icon.png' /></a></div>

这是显示输入的脚本

function show1() {
  document.getElementById('edit_user').style.display = "block";
}

function show2() {
  document.getElementById('edit_pw').style.display = "block";
}

我如何才能再次单击隐藏它们。 单击图标隐藏（）

Answer 1

 function show1() { //getting display of input type var d=document.getElementById('edit_user').style.display; if(d=="block"){ document.getElementById('edit_user').style.display="none"; } else{ document.getElementById('edit_user').style.display="block"; } } function show2() { //getting display of input type var d=document.getElementById('edit_pw').style.display; if(d=="block"){ document.getElementById('edit_pw').style.display="none"; } else{ document.getElementById('edit_pw').style.display="block"; } } 

 <input type="text" id="edit_user" style="display:none;" placeholder="New name." /> <div class="edit_hover_class"><b>example</b> <a><img onclick="show1()" src='images/edit-icon.png' /></a> </div> <input type="text" id="edit_pw" name="password" style="display:none;" placeholder="New email." /> <div class="edit_hover_class">example <a><img onclick="show2()" src='images/edit-icon.png' /></a> </div> 

那是你要的吗？

Answer 2

您可以更改它以切换功能：

function toggle1() {
   if(document.getElementById('edit_user').style.display !== 'block'){
      document.getElementById('edit_user').style.display = "block";
   }else{
      document.getElementById('edit_user').style.display = "none";
   }
}

function toggle2() {
   if(document.getElementById('edit_pw').style.display !== 'block'){
      document.getElementById('edit_pw').style.display = "block";
   }else{
      document.getElementById('edit_pw').style.display = "none";
   }
}

这样，按钮将始终根据元素状态显示/显示。

Answer 3

使用jquery .toggle（）函数。 这很简单...

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function show1(){
  $( "#edit_user" ).toggle();
};
function show2(){
  $( "#edit_pw" ).toggle();
};
</script>