在打开一个新窗体之前，使用javascript关闭所有打开的窗体 [英] Use javascript to close all opened forms before opening a new one

问题描述

我正在制作带图片的html页面，用户点击图片，登录到他们的发票页面。这是我到目前为止：

 < script type =text / javascript> 
 function showHideForm（formid）
 {
 var _form = document.getElementById（formid）; 
 _form.style.display =（_form.style.display！=block）？ block：none; 
返回false; 
} 
< / script> 
 
< p> 
< a href =＃onclick =return showHideForm（'hiddenForm1'）;> 
< img src =width =150height =150/> 
< / a> 
< / p> 
< form id =hiddenForm1style =display：none; method =postaction =user1_login.php> 
< input type =textname =userplaceholder =Namerequired />< br /> 
< input type =textname =passplaceholder =Passwordrequired />< br /> 
< input type =submitname =Submitvalue =Submit/> 
< / form> 
 
< p> 
< a href =＃onclick =return showHideForm（'hiddenForm2'）;> 
< img src =width =150height =150/> 
< / a> 
< / p> 
< form id =hiddenForm2style =display：none; method =postaction =user2_login.php> 
< input type =textname =userplaceholder =Namerequired />< br /> 
< input type =textname =passplaceholder =Passwordrequired />< br /> 
< input type =submitname =Submitvalue =Submit/> 
< / form> 
  

它可以很好地工作，只不过如果你点击其他图片，你会同时打开几个实例。

是否有可能在JavaScript的开始处添加一些代码，以在运行代码打开新表单之前关闭所有打开的实例？

解决方案

逻辑很简单，有一个用于openedform的类。在单击事件中，从现有打开的表单中删除该类，并将该类添加到当前单击的表单中。

  function showHideForm（formid）
 {
 // var _form = $（ ＃ + formid）; （在jQuery中）
 
 var _form = document.getElementById（formid）; 
 //选择所有已经打开的窗体并删除类
 $（'。openedForm'）。removeClass（'openedForm'）; 
 //将openedForm类添加到当前点击的
 $（_ form）.addClass（'openedForm'）; 
返回false; 
} 
  

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

  .openedForm 
 {
 display：block！important; 
 
 
 
 $ b $ p 
 $ b 
如果您需要使用javascript更改元素的CSS，请尝试使用类。通过这种方式，您可以使JavaScript代码更清晰可读，并且您的样式逻辑与主逻辑保持分离。 
尽量避免使用内联样式。
 
 
 
工作演示：
 
  https://jsbin.com/nigivu/edit?html,css,js,output  
 
I'm making an html page with images, where the user clicks their image, to log in to their invoice page. This is what I have so far:
<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>
It works nicely except that if you click on other images, you get several instances open at the same time.  

Is it possible to tack a bit of code to the beginning of the javascript to close any open instances before it runs the code to open a new form?
解决方案
The logic is simple, have a class for openedform. On click event remove that class from the existing  opened forms and add the class to the currently clicked form. Here is how to do it with 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;
 }
Add the following code into your css file.
  .openedForm
     {
        display:block !important;
     }
If you need to alter the css of elements using javascript try to use classes. This way you make your javascript code cleaner and readable and your styling logic stays separated from the main logic.
Avoid using inline styles as much as possible.

Working demo:

https://jsbin.com/nigivu/edit?html,css,js,output

                        
这篇关于在打开一个新窗体之前，使用javascript关闭所有打开的窗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！