0

プログレスバー付きの画像の一覧があります。プログレスバーを1つずつ表示したいです。

つまり、5つのプログレスバーを持つ5つの画像があります。アップロードボタンをクリックすると、最初のプログレスバーを表示し、機能の完了後に対応する機能を実行すると、最初のプログレスバーが非表示になります。機能の完了後に2番目のプログレスバーを表示します2 番目の画像は 2 番目のプログレス バーを非表示にし、次に 3 番目と続きます。

そのためにすでに 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");
    }

問題は、すべてのプログレス バーが同時に表示され、しばらくすると 5 番目のプログレス バーだけが非表示になることです。

しかし、最初のプログレスバーをしばらく表示したいのですが、2番目のプログレスバーが表示された後、最初のプログレスバーが消え、しばらくすると2番目が隠れて息子になります。これどうやってするの？誰でもそれに答えることができますか？

4

1 に答える 1

0

すべての進行状況バーを表示し、最後の 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);
}
于 2012-06-28T07:37:33.400 に答える