点击轮播下一页按钮时获取正确活跃轮播房间ID求助

点击轮播下一页按钮后，尝试获取活跃轮播项的房间ID时，控制台输出142，但实际需要的是当前活跃项的140。以下是问题分析和解决方案：

问题原因 #

现有代码在提交按钮点击时才去查找.carousel-item.active的房间ID，存在两个潜在问题：

• 轮播切换过程中，旧的轮播项可能还未移除active类，导致选择器匹配到多个元素，最终取到第一个匹配项（初始的142）的值。
• 未监听轮播切换完成的事件，无法及时更新当前活跃项的ID。

解决方案 #

方案1：监听轮播切换完成事件（推荐） #

大多数轮播组件（如Bootstrap Carousel）提供切换完成的事件，我们可以在事件触发时更新当前房间ID，确保获取到的是最新活跃项的ID。

修改后的jQuery代码：

// 初始化当前房间ID为初始活跃项的ID
let currentRoomId = $(".carousel-item.active .room_id").val();

// 监听轮播切换完成事件（以Bootstrap Carousel为例）
$('.carousel').on('slid.bs.carousel', function () {
    // 更新当前房间ID为新活跃项的ID
    currentRoomId = $(".carousel-item.active .room_id").val();
});

// 提交按钮点击事件
$(".butonSubmit").click(function(){
    console.log(currentRoomId); // 输出当前活跃轮播项的正确ID
});

方案2：确保选择器精准匹配单个活跃项 #

如果无法使用轮播事件，可通过强制选择第一个匹配的活跃项来避免多个元素干扰：

$(".butonSubmit").click(function(){
    // 使用:first确保只取第一个活跃项的room_id
    let room_id = $(".carousel-item.active:first .room_id").val();
    console.log(room_id);
});

额外检查 #

确认你的轮播组件在切换时会正确移除旧项的active类，若组件存在动画延迟，可适当增加切换完成后的等待逻辑，或优先使用组件提供的事件回调。

内容的提问来源于stack exchange，提问作者Malik Zubair Mukhtar