Question

我有一个带有进度条的图像列表。我想逐个显示进度条。

这意味着我有5个图像，带有5个进度条。当我点击上传按钮时，我想显示第一个进度条并在完成功能后执行相应的功能隐藏第一个进度条。并在完成后显示第二个进度条第二个图像的功能隐藏第二个进度条然后第三个等等。

我已经使用了setTimeout（），但效果不佳。

这是我的HTML代码：

<?php
    $sql = "SELECT * FROM `tblupload` WHERE `indeletestatus` = 0";
    $result = mysql_query($sql);
    $ids = "";
    if($result){
        while($row = mysql_fetch_object($result)){
            if($ids == "")
                $ids = $row->intid;
            else{
                $ids = $ids.",".$row->intid;
            }
?>
                    <div id="list<?php echo $row->intid;?>" class="list_item">
                        <input type="hidden" name="img<?php echo $row->intid;?>" id="img<?php echo $row->intid;?>" value="<?php echo $row->vchname;?>" />
                        <?php //echo $i;?>
                        <div id="load_img" class="list_item_img_div">
                           <!-- <img src="images/pouring-water.jpg" class="list_img_img" />-->
                            <img src="upload/thumb/<?php echo $row->vchname;?>" class="list_img_img" onClick="return main_img(<?php echo $row->intid;?>)" />
                        </div>
                        <div id="imgname" class="imgname">
                            <?php echo $row->vchname;?>
                        </div>
                        <div id="imgprogress<?php echo $row->intid;?>" class="imgprogress">
                            <img src="images/progress.gif" />
                        </div>
                        <div id="imgtrash<?php echo $row->intid;?>" class="imgtrash">
                            <img src="images/trash.png" onClick="return delete_img(<?php echo $row->intid;?>);" />
                        </div>
                     </div>
<?php
        }
    }
?>

<input type="hidden" name="ids" id="ids" value="<?php echo $ids;?>" />

这是我的javascript代码：

 Array.prototype.count = function () {
return this.length;
}
$(document).ready(function(){
$("#upload").click(function() {
                var ids = $("#ids").val();
                var arr = ids.split(",");
                var count = arr.count();
                for(i=0;i<count;i++){
                    idval = arr[i];
                    $("#imgprogress"+idval).css("display","block");
                    setTimeout("load_progress(idval)",2000);
                }
        });
  });   

 function load_progress(id){
        $("#imgprogress"+id).css("display","none");
    }

问题是所有进度条同时显示，并在一段时间后隐藏了唯一的第五个进度条。

但我想在一段时间内显示第一个进度条，然后第一个进度条消失在第二个进度条显示之后，经过一段时间后第二个将隐藏和儿子。我怎样才能做到这一点？任何人都可以回答它吗？

Answer 1

它显示所有进度条和隐藏只有最后一个的原因是因为for循环不会停在setTimeout（）。循环执行到最后使所有进度条可见。

你应该尝试以下几行：

$("#upload").click(function() {
            var ids = $("#ids").val();
            var arr = ids.split(",");
            var count = arr.count();
            $("#imgprogress"+arr[0]).css("display","block");
            setTimeout("load_progress(arr,0,count)",2000);
});     

function load_progress(arr,i,count){
    $("#imgprogress"+arr[i]).css("display","none");
    if (i == count) return false;
    $("#imgprogress"+arr[i]).css("display","block");
    setTimeout("load_progress(arr,++i,count)",2000);
}

使用jquery逐个显示进度条

1 个答案: