jQuery轮播组件异常：移除inactive类后莫名新增active类

看起来你的问题根源在于没有缓存当前操作的元素，而是反复使用全局选择器，这会导致DOM变化后选择器匹配到错误的元素，进而引发意外的类操作。

具体问题出在哪？ #

你每次都用$(".featured-item.inactive")来定位元素，但这个选择器会匹配页面上所有带有inactive类的元素——如果在500ms的延迟期内（比如用户快速点击，或者意外触发多次执行），页面上存在多个带有inactive类的元素，后续的判断和操作就会混乱。比如：

1. 第一次点击后，元素A被添加inactive类，元素B被设为active
2. 如果在setTimeout执行前再次触发函数（哪怕ready变量理论上限制了，但如果有意外情况），元素B会被添加inactive类，元素C被设为active
3. 此时页面上有A、B两个inactive元素，后续用$(".featured-item.inactive")操作时，会同时影响这两个元素，最终导致setTimeout执行时，某个元素被错误地赋予active类。

另外，你的判断条件$(".featured-item.inactive").is(".featured-item:last-child")也存在风险：如果有多个inactive元素，只要其中一个是最后一个子元素，就会执行“给第一个元素加active”的逻辑，这显然不符合你的预期。

修复后的代码 #

我们只需要缓存当前激活的元素，所有操作都针对这个缓存的元素，就能避免选择器匹配错误的问题：

var ready = true;
function bannerNext() {
    if (ready) {
        ready = false;
        // 缓存当前处于active状态的元素，避免后续选择器匹配出错
        var currentActive = $(".featured-item.active");
        
        // 给当前元素添加inactive，移除active
        currentActive.addClass("inactive").removeClass("active");
        
        // 判断当前元素是否是最后一个子元素，直接用缓存的元素判断更准确
        if (currentActive.is(":last-child")) {
            $(".featured-item").first().addClass("active");
        } else {
            currentActive.next().addClass("active");
        }
        
        // 500ms后移除当前元素的inactive类，恢复可点击状态
        setTimeout(function(){
            currentActive.removeClass("inactive");
            ready = true;
        }, 500);
    }
}

为什么这样能解决问题？ #

1. 缓存元素：currentActive变量存储了触发函数时的激活元素，后续所有操作都针对这个固定的元素，不会因为DOM变化而匹配到其他元素。
2. 精准判断：用currentActive.is(":last-child")直接判断当前元素是否为最后一个，避免了全局选择器带来的不确定性。
3. 清晰的操作流程：每一步操作都明确指向当前元素，逻辑更直观，也更容易维护。

你可以试试这个修复后的代码，应该就能解决“500ms后莫名新增active类”的问题了。

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