jQuery实现多触发器对应切换指定表单显示（批量自动化）

嘿，我明白你遇到的问题了——之前用.each和$(this)的时候不小心把所有表单都同时打开了对吧？其实问题出在没有正确把触发器和它对应的表单绑定起来，下面给你两种通用的解决方案，不用硬编码序号，不管你有1个还是10个表单都能完美适配：

方案一：利用DOM层级关系（推荐，更健壮） #

这种方式不依赖ID的命名规则，只靠触发器和表单的父容器关联，就算后续调整ID或者结构，只要它们还在同一个容器里就没问题：

// 给所有表单触发器绑定点击事件
$('[id^="form-trigger-"]').on('click', function() {
  // 1. 找到当前触发器所在的最近表单容器
  // 2. 在这个容器里定位对应的表单元素
  const targetForm = $(this).closest('[id^="form-container-"]').find('[id^="form-"]');
  // 切换表单的可见性
  targetForm.toggle();
});

代码解释： #

• [id^="form-trigger-"]：选中所有ID以form-trigger-开头的触发器元素
• closest('[id^="form-container-"]')：找到当前触发器最近的、ID以form-container-开头的父容器
• find('[id^="form-"]')：在这个父容器里找到对应的表单元素
• toggle()：切换元素的显示/隐藏状态

方案二：从ID中提取序号（适配你现有的ID命名） #

如果你想保留现有的ID命名规则，也可以通过提取触发器ID里的序号来匹配对应的表单：

$('[id^="form-trigger-"]').on('click', function() {
  // 从触发器ID中提取序号部分
  const formNumber = $(this).attr('id').replace('form-trigger-', '');
  // 找到对应序号的表单并切换可见性
  $(`#form-${formNumber}`).toggle();
});

为什么之前的代码会失效？ #

你之前的尝试可能是因为没有限定表单的范围，比如错误地选中了所有表单元素，而不是当前触发器对应的那一个。举个错误示例：

// 错误示例：点击任意触发器都会切换所有表单
$('[id^="form-trigger-"]').each(function() {
  $(this).on('click', function() {
    $('[id^="form-"]').toggle(); // 这里选中了所有ID以form-开头的元素
  });
});

只要把操作范围限定在当前触发器对应的表单上，就能避免所有表单同时切换的问题啦。

内容的提问来源于stack exchange，提问作者user3192978