javascript - 使用 Jquery 一次显示一个数据

Question

我需要一次显示一个数据，但我的代码一次显示所有数据，我错过了什么？这是我的 HTML/PHP 代码

<div style="position: relative;">
    <?php for ($i=1; $i < 1000; $i++) { 
    ?>
    <p id="<?php echo $i; ?>" style="position: absolute; display:none; ">Name <?php echo $i; ?></p>
    <?php   
    }
    ?>
</div>

这是我的 Javascript 代码

<script>
$(document).ready(function(){
    var count;
    $(".btn2").click(function(){
        for(count = 0; count < 1000; count++){
            $("#"+count).show();
            setTimeout(function() { $("#"+count).hide(); }, 500);
        }

    });
});
</script>

我使用的是 jquery 版本 3.2.1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

您必须执行此操作才能一次显示一个数据。

<script>
$(document).ready(function(){
    var count = 0;
    $(".btn2").click(function(){
        $("#"+(count++)).show();
        setTimeout(function() { $("#"+(count-1)).hide(); }, 500);
    });
});
</script>

一键点击一次显示所有数据，延迟 500 毫秒:

<script>
$(document).ready(function(){
    var count = 0;
    $(".btn2").click(function(){
        var iterator = function() {
            $("#"+(count++)).show();
            setTimeout(function() { $("#"+(count-1)).hide(); if (count<1000) iterator(); }, 500);
        }
        iterator();
    });

});
</script>