时间戳

首页 > 解决方案 > jQuery - 显示具有多个触发器的多个 div

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

问题描述

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

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) 的方法，但它一次打开了所有表单，而不是应该触发的表单。

标签： javascriptjquery

解决方案

首先，您需要在以开头的所有a标签上添加点击事件idform-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>

推荐阅读