在.show（）

Question

我希望你能帮我解决这个问题，因为我不熟悉编码。 我开始编写myprofile / editprofile页面的代码。 正如你在这张图片中看到的那样

Username and Password edit PICTURE.

我在名称和电子邮件旁边创建了这两个图标，点击

打开这两个输入

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

我如何在另一次点击中隐藏它们。 Click icon to hide()

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>