javascript - 隐藏/关闭由 .show() 打开的 div

Question

当我的页面加载时，我隐藏一个包含表单的 div

$('#popupPerson').hide();

然后在正文中，我构建一个表和此弹出窗口，以帮助使用最初隐藏的表单插入/更新/删除行数据

<div id="popupPerson" class="popupPerson">
  <form id="form_popup_person" action="person_update" method="post">
    <fieldset>
      <legend>Person</legend>
      <label for="id">id</label>&nbsp;<input name="id" type="number" />&nbsp;&nbsp;
      <label for="revision">revision</label>&nbsp;<input name="revision" type="number" /><p>
      <label for="lastName">lastName</label>&nbsp;<input name="lastName" type="text" />&nbsp;&nbsp;
      <label for="firstName">firstName</label>&nbsp;<input name="firstName" type="text" /><p>
      <label for="street">street</label>&nbsp;<input name="street" type="text" />&nbsp;&nbsp;
      <label for="city">city</label>&nbsp;<input name="city" type="text" /><p>
      <label for="county">county</label>&nbsp;<input name="county" type="text" />&nbsp;&nbsp;
      <label for="state">state</label>&nbsp;<input name="state" type="text" />&nbsp;&nbsp;  
      <label for="postalCode">postalCode</label>&nbsp;<input name="postalCode" type="text" /><p>  
      <label for="birthDate">birthDate</label>&nbsp;<input name="birthDate" type="text" />&nbsp;&nbsp;  
      <label for="email">email</label>&nbsp;<input name="email" type="text" />&nbsp;&nbsp;       
      <label for="status">status</label>&nbsp;<input name="status" type="text" /><p> 
      <input name="submit" type="submit" value="Submit" />
      <input name="cancel" type="submit" class="cancel" value="Cancel" />
      <button type="button" class="cancel" onClick="this.parent.close();">Cancel button</button>
      <button type="button" class="cancel" onClick="$(this).parent().parent().hide();">parent parent hide button</button>
      <button type="button" class="cancel" onClick="$(this).parent().hide();">parent hide button</button>  <!-- makes ALL BUTTONS DISAPPEAR -->
      <button type="button" class="cancel" onClick="$(this).hide();">hide button</button>         <!-- makes the BUTTON ITSELF DISAPPEAR -->       
    </fieldset>
  </form>
</div>

还有一些js，这样如果单击表中的一行，就会触发并使div可见

$('#popupPerson').show();

我想在表单中添加一个“取消”按钮，用于简单地关闭/隐藏 div - 无需提交，无需重置。

Answer 1

你可以简单地这样写

 <button type="button" class="cancel" onClick="$('#popupPerson').hide();">Cancel</button>