使用 jquery 逐个显示进度条
Display progress bar one by one using jquery
我有一个带有进度条的图像列表。我想一一显示进度条。
这意味着我有 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");
}
问题是所有进度条同时显示,一段时间后,唯一的第五个进度条被隐藏。
但是我想显示第一个进度条一段时间,然后第一个进度条消失在第二个进度条显示之后,一段时间后,第二个将隐藏和儿子。 我该怎么做?有人可以回答吗?
它之所以显示所有进度条而只隐藏最后一个进度条,是因为 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);
}
相关文章:
- 如何在页面重新加载时显示jquery ui对话框
- 如何为显示jquery滑块值的文本框设置默认值
- 突出显示jQuery中单词之间的空格
- 不显示 jQuery 不显眼的验证摘要
- Rails-jQuery 为什么我必须单击两次才能显示 jQuery 效果
- 如何在页面导航上显示jquery警报
- Slider和Date Picker未显示JQuery
- 键入时不要显示jQuery UI自动完成
- 如何显示jQuery自动完成响应并选择它
- 如何在返回后将状态保持为突出显示JQuery树视图的选定节点
- 检测文本是否在鼠标上突出显示jQuery
- 30 秒后显示 Jquery UI 对话框
- X 可编辑的编辑值不显示 jquery 集值
- 显示 jQuery 复选框选择
- 用于显示字段的工具提示和显示 Jquery 验证中的错误的工具提示器
- 如果站点上存在多个滑块,则显示 Jquery UI 滑块的值
- 谷歌地图信息框能够显示JQuery UI小部件
- 在标签中以 asp.net 显示 jQuery 的结果
- 当 Javascript 在浏览器中关闭时显示 Jquery .slide() 表单
- 在 Leaflet Map 上显示 jQuery 动态 GeoJSON 内容