点击按钮后每2秒按顺序在input显示li文本的问题求助

你的代码主要有三个核心问题导致无法正常运行，我来逐个拆解并给出修复方案：

1. 脚本执行时机与DOM结构问题 #

原代码里的jQuery脚本位置混乱，甚至重复写了按钮和input元素，导致脚本执行时目标DOM元素还没渲染完成，事件绑定无法生效，同时重复元素也会让选择器逻辑混乱。

2. 闭包中的this指向错误 #

在setTimeout的回调函数里，this的指向已经不是当前循环的<li>元素（会变成window对象），所以$(this).text()根本拿不到正确的li文本内容。

3. 定时器触发时机错误 #

你在each循环里给每个li都设置了2秒后执行的定时器，这会导致所有li的文本在点击按钮2秒后同时替换到input里，而不是依次间隔2秒展示。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        input{ width:40px; height:40px;}
    </style>
</head>
<body>
    <button>show li in order every 2 seconds</button>
    <input type="text" id="show" />
    <ul class="menu">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
    </ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script>
        // 确保DOM完全加载后再执行脚本
        $(function(){
            $("button").on("click",function(){
                // 先把所有li的文本提取到数组中，避免闭包问题
                const liTexts = $(".menu li").map(function(){
                    return $(this).text();
                }).get();
                
                // 遍历数组，给每个元素设置递增的延迟时间
                liTexts.forEach(function(text, index){
                    setTimeout(function() {
                        $("#show").val(text);
                    }, 2000 * (index + 1)); // 第1个li延迟2s，第2个4s，以此类推
                });
            });
        });
    </script>
</body>
</html>

关键修复点说明 #

• DOM就绪包裹：用$(function(){ ... })确保所有DOM元素加载完成后再绑定事件，这是jQuery中处理DOM就绪的标准写法。
• 预存li文本：先把所有li的文本提取到数组中，既规避了闭包导致的this指向问题，也让代码逻辑更清晰高效。
• 递增延迟定时器：通过2000 * (index + 1)设置每个元素的延迟时间，实现第一个li在2秒后展示，第二个在4秒后展示，以此类推的顺序效果。
• 清理重复元素：移除了重复的按钮和input标签，保证页面结构简洁规范。

这样修改后，点击按钮就能按照A→B→C→D→E的顺序，每2秒更新一次input里的内容啦！

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