多同类别按钮与模态框：点击仅唤起对应模态框的实现问题

嘿，我来帮你搞定这个多模态框的问题！你现在遇到的情况是因为代码里直接给所有.modal元素加了active类，所以一点击按钮所有模态框都跑出来了。下面给你两种靠谱的解决思路，都能保持按钮和模态框用相同类名的需求：

方法一：利用索引匹配（适合按钮和模态框顺序一一对应的场景） #

如果你的按钮和模态框是按顺序排列的（比如第一个按钮对应第一个模态框，第二个对应第二个），可以用index()方法获取当前按钮的位置，再找到对应位置的模态框：

$("button").click(function() {
  // 获取当前点击按钮的索引位置
  const btnIndex = $(this).index();
  // 先移除所有模态框的active类（避免之前的模态框还显示），再给对应索引的模态框添加active类
  $(".modal").removeClass("active").eq(btnIndex).addClass("active");
});

方法二：用自定义属性关联（更灵活，不依赖顺序） #

这种方法不需要依赖元素的排列顺序，给每个按钮和对应的模态框设置相同的自定义属性，比如data-modal-id，通过这个属性来关联对应关系：

第一步：修改HTML结构 #

给按钮和模态框添加相同的data-modal-id属性：

<button class="modal-btn" data-modal-id="1">打开模态框1</button>
<div class="modal" data-modal-id="1">
  <!-- 模态框1内容 -->
  <button class="close-btn">关闭</button>
</div>

<button class="modal-btn" data-modal-id="2">打开模态框2</button>
<div class="modal" data-modal-id="2">
  <!-- 模态框2内容 -->
  <button class="close-btn">关闭</button>
</div>

第二步：编写jQuery代码 #

通过自定义属性找到对应的模态框：

$(".modal-btn").click(function() {
  // 获取当前按钮对应的模态框标识
  const targetModalId = $(this).data("modal-id");
  // 先隐藏所有模态框，再显示目标模态框
  $(".modal").removeClass("active");
  $(`.modal[data-modal-id="${targetModalId}"]`).addClass("active");
});

额外补充：关闭模态框的逻辑 #

如果需要点击关闭按钮或者模态框背景关闭模态框，可以加上这段代码：

// 点击关闭按钮关闭对应模态框
$(".close-btn").click(function() {
  $(this).closest(".modal").removeClass("active");
});

// 点击模态框的背景区域关闭模态框
$(".modal").click(function(e) {
  // 判断点击的是模态框本身（不是内部内容）
  if (e.target === this) {
    $(this).removeClass("active");
  }
});

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