Bootstrap 4 Carousel中hasClass检测active类不生效问题求助

问题根因 #

• 选择器不匹配：你代码中使用$("#video-1")定位元素，但实际HTML里视频对应的轮播项id为video，id不匹配导致无法正确选中元素，自然无法检测到active类。
• 执行时机错误：现有逻辑仅在页面加载完成时执行一次，轮播切换slide的过程中不会重复触发，无法响应slide激活/未激活的状态变化。
• HTML结构不符合Bootstrap规范：你为每个轮播项都套了独立的carousel-inner容器，Bootstrap 4要求所有轮播项必须放在同一个carousel-inner中，否则轮播本身的状态切换逻辑就会异常。
• 重复id问题：多个轮播项使用了相同的no-videoid，id在页面中必须唯一，否则会导致选择器异常。

修复步骤 #

1. 修正HTML结构 #

将所有轮播项放入同一个carousel-inner容器，替换重复id为类名，给视频轮播项统一添加标识类方便批量处理：

<div id="narrowcasting-carousel" class="carousel slide h-100" data-ride="carousel" data-interval="600000">
    <div class="carousel-inner h-100">
        <div class="carousel-item h-100 item-0 no-video" data-interval="10000">
             <img src="/images/image.png" />
        </div>
        <div class="carousel-item h-100 item-1 active video-slide" data-interval="20000">
             <iframe class="ytplayer" width="100%" height="100%" src="https://www.youtube.com/embed/[CODE_HERE]?controls=0&loop=0&rel=0&autoplay=0" frameborder="0" allowfullscreen="" allow="autoplay">
            </iframe>
        </div>
        <div class="carousel-item h-100 item-2 no-video" data-interval="5000">
             <img src="/images/image.png" />
        </div>
    </div> 
</div>

2. 重写JS逻辑 #

监听Bootstrap轮播的slid.bs.carousel事件（轮播切换完成后触发），每次切换时分别处理当前激活项和上一个项的视频播放状态：

$(document).ready(function() {
    // 页面加载时处理初始激活的轮播项
    handleVideoPlay($('#narrowcasting-carousel .carousel-item.active'));
    
    // 监听轮播切换完成事件
    $('#narrowcasting-carousel').on('slid.bs.carousel', function(e) {
        // 停止上一个轮播项的视频
        handleVideoStop($(e.relatedTarget));
        // 播放当前激活轮播项的视频
        handleVideoPlay($(e.target).find('.carousel-item.active'));
    });
});

// 视频播放逻辑
function handleVideoPlay($slide) {
    if ($slide.hasClass('video-slide')) {
        const player = $slide.find('.ytplayer')[0];
        let src = player.src;
        // 移除旧的autoplay参数避免重复拼接
        src = src.replace(/&autoplay=\d/, '');
        player.src = src + '&autoplay=1';
    }
}

// 视频停止逻辑
function handleVideoStop($slide) {
    if ($slide.hasClass('video-slide')) {
        const player = $slide.find('.ytplayer')[0];
        let src = player.src;
        src = src.replace(/&autoplay=\d/, '');
        player.src = src + '&autoplay=0';
    }
}

注意事项 #

如果需要添加多个视频轮播项，只需要给对应轮播项加video-slide类，内部iframe加ytplayer类即可，不需要额外修改JS逻辑。

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