按钮上的JavaScript进度条Incrememnet点击发布引导

Question

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

$(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); 
 
    } 
 
}

<!-- 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>

Answer 1

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

<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>

您没有设置i参数回0，当你关闭模式