Question

我遇到的这个问题是第一次单击上传按钮，进度条正在递增，但是当您按下模式的关闭按钮时，它将关闭模态并再次单击添加附件以打开模态，然后再次按上传 - 进度条不会增加。我认为它的问题可能是javascript没有循环。请帮忙。

＆＃13;

$(document).ready(function() {
  $("#reset").click(function() {
    $(':input', '#attachmentModal').val("");
    $("#pbarmain").hide();
    $("#pbar").hide();
  });
});


var i = 0;

function makeProgress() {
  console.log("testing")
  $("#pbarmain").show();
  if (i < 100) {
    i = i + 4;
    $(".progress-bar").css("width", i + "%").text(i + " %");
    setTimeout("makeProgress()", 100);
  }
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="pbarmain" style="display: none" class="progress progress-striped active">
  <div id="pbar" class="progress-bar"></div>
</div>
<button type="button" onClick="makeProgress()" class="btn btn-default">Upload</button>
<button type="button" id="reset" class="btn btn-default" data-dismiss="modal">Close</button>

＆＃13;

Answer 1

＆＃13;

var i = 0;
$(document).ready(function() {
    $("#reset").click(function() {
        $(':input','#attachmentModal').val("");
        $("#pbarmain").hide();
        $("#pbar").hide();
        $(".progress-bar").css("width", "0%");
        i = 0;
    });
});
function makeProgress(){
  $("#pbarmain").show();
  $("#pbar").show();
    if(i < 100){
    i = i + 4;
    $(".progress-bar").css("width", i + "%").text(i + " %");
    setTimeout("makeProgress()", 100);
  }
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div  id = "pbarmain" style="display: none" class="progress progress-striped active">
<div id = "pbar" class="progress-bar"></div>
</div>

<button type="button" onClick="makeProgress()" class="btn btn-default" >Upload</button>
  <button type="button" id ="reset" class="btn btn-default" data-dismiss="modal">Close</button>

＆＃13;

关闭模式时，您没有将i参数设置为0

按钮上的JavaScript进度条增量网单击问题引导程序

1 个答案: