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>

Answer 2

我使用jquery在包装器中添加1000 div而不是使用PHP。

如果有用，请参阅我的代码。

＆＃13;

$(document).ready(function() {
  for (var i = 0; i <= 1000; i++) {
    $(".wrapper").append("<div class='item' id='" + i + "'>" + i + "</div>");
  };
});
var step = 0;

function hideItemFunc() {
  var interval = setInterval(function() {
    $("#" + step).animate({
      opacity: 1
    }, 500);
    step += 1;
  }, 500);
}

＆＃13;

.item {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 3px;
  font-size: 9px;
  background: #aaa;
  text-align: center;
  line-height: 20px;
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<button class="btn2" onclick="hideItemFunc()">Run</button>
<div class="wrapper">
</div>

＆＃13;

Answer 3

您可以使用setInterval而不是setTimeout。这将重复调用该函数。 SetTimeout只执行一次，而setInterval是重复的。

此外，您需要重复的执行顺序应该在setInterval的函数体内。

var count = 1;
var delayMillis = 5000; //5 second

$(document).ready(function(){
    $("#btn2").click(function(){
            setInterval(function() {
                //your code to be executed after 5 second
                $("#" + count).show();
                count++;
            }, delayMillis);

        });
    });

当前代码一个接一个地显示5秒后的每个p记录。您需要做的任何事情都将在setInterval Block

中

使用Jquery一次显示一个数据

3 个答案: