使用jquery逐个显示进度条

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); 
}