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