基于CSS和jQuery实现简单lightbox时点击图片总打开最后一张的问题求解

问题原因 #

你现有的jQuery选择器$(".lightbox")会选中页面中所有带lightbox类的元素，执行toggle()时所有灯箱都会切换显示状态。由于你给lightbox设置了fixed全屏定位，多个灯箱同时显示时，DOM结构中后添加的元素会默认堆叠在更早的元素上方，因此无论点击哪张图，你看到的都是最后添加的那张。

修复方案 #

仅需要修改你的jQuery逻辑，点击触发元素时仅操作当前触发元素内部对应的灯箱即可，修改后代码如下：

$(".trigger").click(function(){
  // 查找当前被点击的.trigger内部的.lightbox元素，仅切换它的显示状态
  $(this).find(".lightbox").toggle();
});

// 可选补充：点击灯箱背景时关闭灯箱
$(".lightbox").click(function(e){
  // 阻止事件冒泡到父级.trigger，避免重复触发点击事件
  e.stopPropagation();
  $(this).hide();
});

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