在打开新表单之前使用 javascript 关闭所有打开的表单

Question

我正在制作一个带有图像的 html 页面，用户在其中单击他们的图像，以登录到他们的发票页面。这是我目前所拥有的：

<script type="text/javascript">
   function showHideForm(formid) 
    {
       var _form = document.getElementById(formid);
      _form.style.display = (_form.style.display != "block") ? "block" : "none";
       return false;
    }
</script>

<p>
  <a href="#" onclick="return showHideForm('hiddenForm1');">
    <img src="" width="150" height=    "150" />
  </a>
</p>
<form  id="hiddenForm1" style="display: none;" method="post" action="user1_login.php">
  <input type="text" name="user" placeholder="Name" required /><br />
  <input type="text" name="pass" placeholder="Password" required/><br />
  <input type="submit" name="Submit" value="Submit" />
</form>

<p>
  <a href="#" onclick="return showHideForm('hiddenForm2');">
    <img src=""  width="150" height="150" />
  </a>
</p>
<form  id="hiddenForm2" style="display: none;" method="post" action="user2_login.php">
  <input type="text" name="user" placeholder="Name" required /><br />
  <input type="text" name="pass" placeholder="Password" required/><br />
  <input type="submit" name="Submit" value="Submit" />
</form>

它工作得很好，除了如果你点击其他图像，你会同时打开几个实例。

是否可以在 javascript 的开头添加一些代码以在运行代码以打开新表单之前关闭任何打开的实例？

Answer 1

逻辑很简单，有一个openform的类。在单击事件中，从现有打开的表单中删除该类，并将该类添加到当前单击的表单中。这是使用 jquery 的方法。

 function showHideForm(formid) 
 {
    // var _form=$("#"+formid);  (in jquery)

    var _form =document.getElementById(formid);
    //select all existing opened forms and remove the class
    $('.openedForm').removeClass('openedForm');
    //add the openedForm class to the currently clicked 
    $(_form).addClass('openedForm');
    return false;
 }

将以下代码添加到您的 css 文件中。

  .openedForm
     {
        display:block !important;
     }

如果您需要使用 javascript 更改元素的 css，请尝试使用类。通过这种方式，您可以使您的 javascript 代码更清晰易读，并且您的样式逻辑与主逻辑保持分离。 尽量避免使用内联样式。

工作演示：
https://jsbin.com/nigivu/edit?html,css,js,output