使用jquery一一显示进度条

Posted 2023-03-12

【中文标题】使用jquery一一显示进度条

【英文标题】：Display progress bar one by one using jquery

【发布时间】：2012-06-28 06:14:18

【问题描述】：

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

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

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

但是我想显示第一个进度条一段时间，然后第一个进度条就消失了 在第二个进度条显示之后，一段时间后第二个将被隐藏和儿子。 我怎样才能做到这一点？ 有谁能解答吗？

【参考方案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);

【讨论】：

id 来自数据库，现在它包含 100,105,108,109,110,111，现在计数为 6。这两个值可能会有所不同。所以这在这种情况下不起作用

@galtech.Mariya 我更改了代码以使其适用于您的 id 类型。