多链接触发Lightbox失效问题解决：用Class替代唯一ID

问题现象 #

修改Lightbox代码后，页面中只有第一个触发链接能打开弹窗，其余链接点击无反应。

问题原因 #

HTML中ID属性是唯一标识，同一页面内不可存在多个相同ID的元素。原代码使用#lightblink（ID选择器）绑定点击事件，只会匹配到第一个带该ID的元素，导致后续同ID的链接无法触发弹窗逻辑。

修复方案 #

将触发选择器从唯一ID #lightblink 改为类选择器 .lightblink，同时把所有触发链接的id属性替换为class属性。

修改后的JavaScript代码

$(document).ready(function($) {
  // 打开Lightbox弹窗
  // 从#lightblink改为.lightblink
  $('.lightblink').on('click', function(event) {
    event.preventDefault();
    $('.lightbactivate').addClass('is-visible');
  });

  // 点击关闭按钮或弹窗外部关闭弹窗
  $('.lightb').on('click', function(event) {
    if ($(event.target).is('.lightb-close') || $(event.target).is('.lightb')) {
      event.preventDefault();
      $(this).removeClass('is-visible');
    }
  });

  // 按下ESC键关闭弹窗
  $(document).keyup(function(event) {
    if (event.which == '27') {
      $('.lightb').removeClass('is-visible');
    }
  });
});

触发链接修改对比

<!-- 错误写法：同一页面多个元素复用相同ID -->
<a id="lightblink" href="#">打开弹窗</a>

<!-- 正确写法：使用类属性实现多元素绑定 -->
<a class="lightblink" href="#">打开弹窗</a>

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