页面加载隐藏所有div，依次显示后自动隐藏的JS代码异常排查

嘿，我看了你的代码，发现几个导致元素无法隐藏的关键问题，咱们一步步来修复：

首先说说代码里的明显错误 #

你所有的jQuery选择器都写错了——$"div.item"应该是$("div.item")，少了左括号的话，jQuery根本无法正确选中元素，这可能是一开始hide()就没生效的原因之一。

然后是闭包和循环逻辑的问题 #

你在setTimeout里引用的i会因为闭包特性，最终拿到的是transition函数执行完后i的最新值，而不是触发setTimeout时的那个i。另外，当i超过页面中div.item的总数后，没有重置为0，后续的eq(i)找不到元素，之前的元素自然也不会被正确隐藏。

修正后的代码方案（推荐这个，逻辑更清晰） #

// 先隐藏所有元素，缓存选择器提升性能
const items = $("div.item").hide();
const totalItems = items.length;
let i = 0;

function transition() {
    // 隐藏上一个显示的元素（处理循环边界）
    items.eq((i - 1 + totalItems) % totalItems).hide();
    // 显示当前元素
    items.eq(i).show();
    // 更新索引，循环重置
    i = (i + 1) % totalItems;
}

// 页面加载后立刻执行一次，不用等2秒
transition();
// 每隔2秒切换一次
setInterval(transition, 2000);

另一种保留你原思路的修正（解决闭包问题） #

如果你想保留嵌套setTimeout的写法，可以用立即执行函数捕获当前索引：

$("div.item").hide();
const items = $("div.item");
const totalItems = items.length;
let i = 0;

function transition() {
    // 用IIFE捕获当前的i值，避免闭包问题
    (function(currentIndex) {
        items.eq(currentIndex).show();
        setTimeout(() => {
            items.eq(currentIndex).hide();
        }, 2000);
    })(i);
    
    // 循环重置索引
    i = (i + 1) % totalItems;
}

setInterval(transition, 2000);

修正点说明 #

• 修复了jQuery选择器的语法错误，同时缓存了元素集合，避免重复查询DOM；
• 处理了索引的循环边界，确保轮播到最后一个元素后能回到第一个；
• 第一种方案把显示和隐藏逻辑放在同一轮执行，避免了闭包导致的变量混乱，逻辑更直观；
• 第一种方案初始就执行一次transition，用户不用等待2秒才看到第一个元素。

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