基于jQuery的视频画廊悬停预览图片不显示问题求助

我帮你梳理下代码里的几个关键问题，以及对应的修复方案：

核心问题分析 #

1. 循环变量的闭包陷阱 #

你的handler函数里引用了循环变量i，但当循环执行完毕后，i的值已经变成了galleryVideos.length（也就是4），这时候galleryVideos[i]是undefined，导致你设置的background-image路径为空，自然无法加载预览图。

2. 动态元素的事件绑定不可靠 #

你是在循环结束后直接给.thumbnail绑定mouseover事件，虽然当前代码可能暂时生效，但对于动态生成的元素，更稳健的方式是使用事件委托（绑定到父元素上监听子元素事件），避免后续新增元素无法触发事件的问题。

3. 全局变量与批量元素操作问题 #

• 你使用了未声明的全局变量（length、i、vidId），容易造成变量污染；
• $('.thumbnailImg').css({ 'display': 'none' })会隐藏所有视频卡片的缩略图，而不是当前悬停的那一个，这显然不符合需求。

修复后的完整代码 #

var galleryVideos = [{ 
    image: 'assets/images/poster/kalakriti.png', 
    videoURL: 'assets/videos/kalakruti.mp4', 
    videoTitle: 'Newspaper Fashion @ NITK', 
    videoDuration: '2.15', 
    videoDescription : 'Best moments of Anokha 2017. Amazing Rangoli done by students on their fest.', 
    brandLogo: 'assets/images/brands/oasis.jpg', 
    brandName: 'Oasis', 
    videoDate: 'Oct 28, 2017', 
    id: 'element1', 
    previewImg: 'assets/videos/nitk.webp' 
}, { 
    image: 'assets/images/poster/tech-rangoli.jpg', 
    videoURL: 'assets/videos/tech_rangoli_anokha.mp4', 
    videoTitle: 'Tech Rangoli @ Anokha 2017', 
    videoDuration: '1.70', 
    videoDescription : 'Best moments of Anokha 2017. Amazing Rangoli done by students on their fest.', 
    brandLogo: 'assets/images/brands/talentime.jpg', 
    brandName: 'Talentime', 
    videoDate: 'Nov 17, 2017', 
    id: 'element2', 
    previewImg: 'assets/videos/anokha.webp' 
}, { 
    image: 'assets/images/poster/crew-jam.jpg', 
    videoURL: 'assets/videos/crew_jam.mp4', 
    videoTitle: 'Crew Jam @ UTSAV \'17', 
    videoDuration: '3.08', 
    videoDescription : 'Best moments of Anokha 2017. Amazing Rangoli done by students on their fest.', 
    brandLogo: 'assets/images/brands/spardha17.jpg', 
    brandName: 'Spardha', 
    videoDate: 'Dec 20, 2017', 
    id: 'element3', 
    previewImg: 'assets/videos/anokha.webp' 
}, { 
    image: 'assets/images/poster/tech-rangoli.jpg', 
    videoURL: 'videos/tech_rangoli_anokha.mp4', 
    videoTitle: 'Tech Rangoli @ Anokha 2017', 
    videoDuration: '1.70', 
    videoDescription : 'Best moments of Anokha 2017. Amazing Rangoli done by students on their fest.', 
    brandLogo: 'assets/images/brands/talentime.jpg', 
    brandName: 'Talentime', 
    videoDate: 'Jan 4, 2018', 
    id: 'element4', 
    previewImg: 'assets/videos/anokha.webp' 
}]; 

$(document).ready(function () { 
    // 使用forEach循环，避免闭包陷阱，同时声明局部变量
    galleryVideos.forEach(function(video) { 
        $('.jsCategoriesGallery').append(`<div class="videoCard">
            <div class="thumbnail-section">
                <div class="jsCategory thumbnail" id="${video.id}" 
                     data-title="${video.videoTitle}" 
                     data-video="${video.videoURL}"
                     data-preview="${video.previewImg}">
                    <img class="thumbnailImg" src="${video.image}" alt="${video.videoTitle}">
                    <span class="duration">${video.videoDuration}</span>
                </div>
            </div>
            <div class="videoDetails">
                <h3 class="videoTitle">${video.videoTitle}</h3>
                <p class="videoDescription">${video.videoDescription}</p>
            </div>
            <div class="brandLogo">
                <img src="${video.brandLogo}">
            </div>
            <div class="brandDetails">
                <p>${video.brandName} | ${video.videoDate}</p>
            </div>
        </div>`); 
    }); 

    // 使用事件委托，绑定到父元素
    $('.jsCategoriesGallery').on('mouseover', '.thumbnail', function() { 
        var $thumbnail = $(this);
        // 从data属性获取预览图路径（比从数组查找更高效）
        var previewImg = $thumbnail.data('preview');
        
        // 设置当前缩略图的背景
        $thumbnail.css({ 
            'background-image': `url(${previewImg})`, 
            'background-position': 'center', 
            'background-size': 'contain'
        }); 
        // 只隐藏当前元素内的缩略图
        $thumbnail.find('.thumbnailImg').css('display', 'none'); 
    });

    // 可以补充mouseout事件，恢复原来的缩略图显示
    $('.jsCategoriesGallery').on('mouseout', '.thumbnail', function() { 
        var $thumbnail = $(this);
        $thumbnail.css('background-image', 'none');
        $thumbnail.find('.thumbnailImg').css('display', 'block'); 
    });
});

关键修改点说明 #

1. 改用forEach循环：避免了for循环的闭包问题，直接遍历每个视频对象，代码更清晰；
2. 添加data-preview属性：把预览图路径直接存在DOM元素的data属性里，不需要再从数组中查找，更高效；
3. 事件委托绑定：绑定到父元素.jsCategoriesGallery上，确保动态生成的.thumbnail元素都能触发事件；
4. 局部变量与精准操作：使用$thumbnail缓存当前元素，只操作当前元素内的.thumbnailImg，避免影响其他卡片；
5. 补充mouseout事件：实现鼠标离开后恢复原缩略图的功能，提升用户体验。

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