javascript - jQuery - 显示具有多个触发器的多个 div

Question

我的页面上有重复触发器，它应该在单击时打开(更改可见性)特定表单。在某些页面上，有多个触发器和表单。

HTML 标记如下:

<div id="form-container-1">
  <a id="form-trigger-1">Open Form</a>
  <div id="form-1">
    content of form
  </div>
</div>
<div id="form-container-2">
  <a id="form-trigger-2">Open Form</a>
  <div id="form-2">
    content of form
  </div>
</div>

我正在尝试编写一个脚本，在该脚本中单击#form-trigger-x 会显示共振表单 (#form-x)。这不是问题，但我想自动执行此操作，因此如果页面有一个表单，它就可以工作，如果它有 10 个表单，它也可以工作，而不需要对脚本中的每个数字进行硬编码。

我尝试了使用 .each 和 $(this) 的方法，但它一次打开了所有表单，而不是应触发的表单。

Answer 1

首先，您需要在所有 a 标记上添加点击事件，其中 id 以 form-trigger 开头，并带有

$("a[id^='form-trigger']").click(function(){

然后你只需要获取 next单击 a 标签并使用其显示属性或任何您想要的属性

$(this).next()

$("a[id^='form-trigger']").click(function(){
    $(this).next().slideToggle();
})

$(".btn").click(function(){
   $(this).closest("div").slideToggle();
})

#form-2{
  display:none;
}
#form-1{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
  <a id="form-trigger-1">Open Form</a>
  <div id="form-1">
    content of form 1
   <button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
  </div>
</div>
<div id="form-container-2">
  <a id="form-trigger-2">Open Form</a>
  <div id="form-2">
    content of form 2
       <button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>

  </div>
</div>