Question

我在表单上有一个进度条，它可以正常工作，但是我需要在文件上传后重置其值。

我的代码：

<div class="bar-position">
  <div class="col-md-14 col-md-14 progress-container">
    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-success" style="width:0%"></div>
    </div>
  </div>
</div>

我在上传文件后尝试使用此功能，但是它不起作用：

$('.progress').val(0);

谁能看到我要去哪里了。我看过很多文章，但找不到适合我的代码的解决方案。

在此先感谢您的帮助和时间。

Answer 1

进度条使用width属性显示进度。要重置它，请使用以下命令：

$('.progress-bar').css("width","0%");

Answer 2

您可以简单地做到这一点：

$('.progress-bar').attr('style', "width: 0%");

以下是代码段：

$('#reset').on('click', function (e) {
    $('.progress-bar').attr('style', "width: 0%");
});
$('#upload').on('click', function (e) {
    $('.progress-bar').attr('style', "width: 100%");
});

body {
    margin: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar-position">
  <div class="col-md-14 col-md-14 progress-container">
    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-success" style="width:100%"></div>
    </div>
  </div>
  <button id="upload" type="button" class="btn btn-primary">Upload</button>
  <button id="reset" type="button" class="btn btn-primary">Reset</button>
</div>

Answer 3

请通过jQuery进行检查：

$('.progress.active').val(progress); //ENTER PROGRESS BAR VARIABLE HERE
  if ($('.progress.active').val() >= 100) { //IF 100% PROGRESS 
    $('.progress.active').val(0); //VALUE WILL BE RESET 
}

Answer 4

我想要的是在提交表单后重新激活进程栏，对我有用的是先删除元素，然后在 setTimeout 函数后重新添加它。但是当进度条值为 100 时，您可以将其附加到事件上。

 setTimeout(()=> {
    $('.progress-bar').remove();   
    $('.progress').prepend(`<div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>`)
  },3000);

使用jQuery提交表单后重置进度栏

4 个答案: