隐藏& lt; input>后,告诉() - Hide <input> after .show()

Hide <input> after .show()

本文关键字：告诉 lt input 隐藏 | 更新日期: 2023-09-27

我希望你能帮助我，因为我是新的编码。我开始编码我的个人资料/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";
}

如何隐藏他们在另一个点击。点击图标隐藏()

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

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>

这是你想要的吗?

你可以改变它来切换功能:

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

这样，按钮将始终显示/显示取决于元素的状态。