如何通过单段jQuery代码实现按钮点击触发对应编号弹窗显示？

直接将下述代码放置到页面</body>标签前即可，注意需要先引入jQuery库再运行这段代码，无需针对每个按钮单独写绑定逻辑：

$(function() {
  // 初始化状态：隐藏所有id以popup开头的弹窗元素
  $('[id^="popup"]').hide();

  // 给所有符合规则的元素绑定点击事件：携带vignette类、id以bouton开头
  $('.vignette[id^="bouton"]').click(function() {
    // 提取当前点击元素id中的数字标识：替换掉bouton前缀，剩余内容就是匹配用的数字
    const targetNum = $(this).attr('id').replace('bouton', '');
    // 点击新按钮时先关闭其他已打开的弹窗，不需要多弹窗互斥可以删除下一行
    $('[id^="popup"]').hide();
    // 显示对应数字编号的弹窗
    $('#popup' + targetNum).show();
  })

  // 可选扩展：给弹窗内携带close-btn类的按钮绑定关闭功能
  $(document).on('click', '.close-btn', function() {
    $(this).closest('[id^="popup"]').hide();
  })
})

HTML编写规则 #

只要页面元素保持id命名规则对应即可正常生效，参考结构如下：

<!-- 按钮元素：必须带vignette类，id格式为bouton+数字 -->
<div class="vignette" id="bouton1">作品1封面</div>
<div class="vignette" id="bouton2">作品2封面</div>
<div class="vignette" id="bouton3">作品3封面</div>

<!-- 弹窗元素：id格式为popup+和按钮一致的数字 -->
<div id="popup1">
  <p>作品1详情内容</p>
  <button class="close-btn">关闭弹窗</button>
</div>
<div id="popup2">
  <p>作品2详情内容</p>
  <button class="close-btn">关闭弹窗</button>
</div>
<div id="popup3">
  <p>作品3详情内容</p>
  <button class="close-btn">关闭弹窗</button>
</div>

注意点 #

• 按钮和弹窗的数字编号必须完全一致，不要出现bouton1对应popup01这类格式不统一的问题，否则会匹配失败
• 上述代码默认开启弹窗互斥：点击新的作品按钮会自动关闭之前打开的弹窗，如果需要同时打开多个弹窗，删除代码中标注的互斥隐藏逻辑即可
• 代码只实现显示/隐藏的交互逻辑，弹窗的固定定位、居中、遮罩层、样式效果可以自行编写CSS控制，不影响功能运行

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