0

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

这意味着我有 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");
    }

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

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

4

1 回答 1

0

它显示所有进度条并仅隐藏最后一个的原因是因为 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);
}
于 2012-06-28T07:37:33.400 回答