jQuery图片画廊匹配JSON图片标题功能实现遇阻求助

核心问题在于你之前的实现没处理好异步请求的时序——单独的GetTitle函数如果依赖异步加载titles.json，循环调用时无法同步拿到结果；把请求逻辑放进循环会重复请求JSON文件，导致回调重复生成图片。

正确的做法是先一次性加载完标题映射，再循环生成图片并匹配标题，既解决异步时序问题，也不会重复创建内容。

步骤1：确认titles.json结构 #

假设你的titles.json是键值对格式，键为图片文件名（需和实际图片路径的文件名完全一致）：

{
  "sunset.jpg": "夏日海边日落",
  "mountain.jpg": "山间晨雾",
  "city-night.jpg": "都市霓虹夜景"
}

步骤2：修正后的代码实现 #

// 先加载所有标题映射，再处理图片
$.getJSON('titles.json', function(titlesMap) {
  // 加载你的图片列表JSON（如果图片列表是硬编码数组，直接替换这里即可）
  $.getJSON('images.json', function(images) {
    $.each(images, function(index, imgInfo) {
      // 提取图片文件名（处理带路径的URL，比如"gallery/sunset.jpg" -> "sunset.jpg"）
      const imgFileName = imgInfo.url.split('/').pop();
      // 匹配标题，无匹配时用默认值
      const imgTitle = titlesMap[imgFileName] || '未命名图片';

      // 生成灯箱画廊的DOM元素
      const galleryItem = $('<div class="gallery-item"></div>')
        .append($('<img>').attr({
          'src': imgInfo.url,
          'alt': imgTitle
        }))
        .append($('<div class="gallery-title"></div>').text(imgTitle));

      // 将元素添加到页面容器
      $('#lightbox-gallery').append(galleryItem);
    });
  });
});

问题原因解析 #

• 单独的GetTitle函数：如果内部用$.getJSON异步请求titles.json，函数会立即返回而非等待请求完成，循环里根本拿不到正确标题。
• 把请求逻辑放进循环：每次循环都会发起一次titles.json请求，多个异步回调会重复生成相同图片元素，导致重复问题。

额外注意事项 #

• 确保titles.json的键与图片文件名完全匹配（包括大小写、后缀名，比如Sunset.jpg和sunset.jpg会被视为不同键）。
• 如果图片URL有复杂路径，可改用正则提取文件名：const imgFileName = imgInfo.url.match(/[^\/]+$/)[0];
• 始终设置标题默认值，避免无匹配时显示undefined。

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