按鈕上的JavaScript進度條Incrememnet點擊發布引導

我遇到的這個問題是第一次單擊上傳按鈕，進度條正在遞增，但是當您按下模式的關閉按鈕時，它將關閉模式並再次點擊添加附件打開模式，然後再次按上傳 - 進度條不增加。我認爲它的JavaScript不循環的問題也許。請幫忙。按鈕上的JavaScript進度條Incrememnet點擊發布引導

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

來源

2017-03-08 RA19

-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，當你關閉模式

來源

2017-03-08 13:44:43

嗨布倫特。謝謝！ – RA19

@ RA19請將此答案設置爲已完成並降低原因？ –

嗨布倫特。我怎麼做？ – RA19

按鈕上的JavaScript進度條Incrememnet點擊發布引導

回答

相關問題