无法找到AJAX动态添加元素？Fancybox缩略图激活状态异常求助

核心问题 #

1. 重复ID导致元素无法定位：循环创建缩略图时，所有<a>和<img>都使用了相同的id（fancybox__img-thumb-wrapper、fancybox__img-thumb），而DOM中ID必须唯一，这直接导致$(document).find()只能匹配到第一个元素，后续动态添加的缩略图无法被正确定位。

2. 激活状态未实时更新：仅在首次AJAX加载缩略图时设置激活状态，后续打开组件切换主图时，没有重新匹配当前主图对应的缩略图并更新激活类，导致激活状态停留在上次最后一个缩略图。

3. 变量作用域判断逻辑缺陷：依赖全局变量thumbWrapper判断是否加载缩略图，首次加载后length不为0，后续打开组件时跳过所有缩略图相关处理，无法根据当前主图更新激活状态。

修复步骤 #

1. 替换重复ID为类名

将循环中创建元素的id改为class，确保每个缩略图元素都能被正确选择：

// 原代码
thumbWrapper = $('<a/>', {id: 'fancybox__img-thumb-wrapper'}),
thumbImg = $('<img>', {id: 'fancybox__img-thumb'});

// 修改后
thumbWrapper = $('<a/>', {class: 'fancybox__img-thumb-wrapper'}),
thumbImg = $('<img>', {class: 'fancybox__img-thumb'});

2. 提取激活状态判断为独立函数

创建通用函数，每次打开组件或切换主图时，都能根据当前主图的src匹配对应缩略图并设置激活状态：

function setActiveThumbnail(currentMainImgSrc) {
    // 先移除所有缩略图的激活类
    $('.fancybox__img-thumb-wrapper').removeClass('img-active');
    
    // 提取主图文件名（避免路径差异影响匹配）
    var mainImgName = currentMainImgSrc.substring(currentMainImgSrc.lastIndexOf("/") + 1);
    
    // 找到对应文件名的缩略图并添加激活类
    $('.fancybox__img-thumb').each(function() {
        var thumbImgName = $(this).attr('src').substring($(this).attr('src').lastIndexOf("/") + 1);
        if (thumbImgName === mainImgName) {
            $(this).closest('.fancybox__img-thumb-wrapper').addClass('img-active');
            return false; // 找到匹配项后终止循环
        }
    });
}

3. 调整组件打开时的逻辑

• 首次加载缩略图后调用激活函数；
• 后续每次打开组件，无论缩略图是否已加载，都重新调用激活函数匹配当前主图：

gallery.find('a').on('click', function(event) {
    event.preventDefault();

    overlay.appendTo('body');
    var galleryImgWrapperHref = $(this).attr('href');
    image.attr('src', galleryImgWrapperHref);

    loadingImg.appendTo('#fancybox__img-wrapper');

    image.on('load', function() {
        image.appendTo('#fancybox__img-wrapper');
        loadingImg.hide();
        // 主图加载完成后设置激活缩略图
        setActiveThumbnail(galleryImgWrapperHref);
    });

    // 改为判断容器内是否已有缩略图，而非依赖全局变量
    if ($('#fancybox__thumb-slider').find('.fancybox__img-thumb-wrapper').length === 0) {
        var itemId = $('.item-detail').attr('id');
        $.ajax({
            url: '_inc/getPhotosFromDb.php',
            type: 'post',
            data: { item_id: itemId }
        }).done(function(html) {
            galleryImgs = $(html);
            galleryImgs.each(function() {
                var src = $(this).attr('src'),
                    href = src.replace('thumbs/','');
                    thumbWrapper = $('<a/>', {class: 'fancybox__img-thumb-wrapper'}),
                    thumbImg = $('<img>', {class: 'fancybox__img-thumb'});

                thumbWrapper.attr('href', href);
                thumbImg.attr('src', src);
                thumbWrapper.html(thumbImg);
                thumbWrapper.appendTo('#fancybox__thumb-slider');
            });
            // 缩略图加载完成后设置当前主图对应的激活状态
            setActiveThumbnail(galleryImgWrapperHref);
        });
    } else {
        // 缩略图已存在，直接设置当前主图对应的激活状态
        setActiveThumbnail(galleryImgWrapperHref);
    }
});

4. 关闭组件时的清理（可选）

如果需要在关闭组件时重置激活状态，可添加关闭事件处理：

// 假设关闭按钮选择器为#fancybox-close
$('#fancybox-close').on('click', function() {
    $('.fancybox__img-thumb-wrapper').removeClass('img-active');
    overlay.remove(); // 执行你的组件隐藏/移除逻辑
});

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