增加寬度10％？

Question

我想通過每次10％我點擊一個按鈕，以增加一個進度的寬度：

<div id="#progressBar" style="width:50%"> </div> 

我想通過提高10％以上的進度條的寬度，當我點擊一個按鈕。

我試過，但它不工作：

$("#increaseButton").click(function() { 
    $("#progressBar").css("width",$("#div2increase").width + 10); 
}); 

請幫幫忙！

進度條的當前寬度可以是0％到100％之間的任何值。在增加10％的時候它是未知的

Answer 1

以下代碼點擊一個按鈕會增加一個10％的條。當酒吧達到100％時，您無法再增加尺寸。

這是非常基本的一個，但我希望它可以幫助你開始。

http://jsfiddle.net/x8w2fbcg/6/

<div id="progressBar">bar</div> 
    <div id="progressBarFull"> &nbsp;</div> 
    <button id="btn" type="button">enlarge</button> 



    $("#btn").click(function() { 
     var curSize = $("#progressBar").width(); 
     var fullSize = $("#progressBarFull").width(); 
     if(curSize < 100) { 
      var increment = fullSize/ 10; 
     $("#progressBar").css('width', '+=' + increment); 
     } 
    }); 


    #progressBar { 
     position: fixed; 
     height: 20px; 
     width: 0px; 
     background-color: red; 
    z-index: 10;  
    } 
    #progressBarFull { 
     position: fixed; 
     height: 20px; 
     width: 100px; 
     background-color: gray;  
    } 
    #btn { 
      position: fixed; 
     top: 100px; 

    } 

Answer 2

對於你使用%，元素將繼承%從它的父的寬度，所以你需要添加10％之前得到的進度的實際% width

$("#increaseButton").click(function() { 
 
    var $bar = $("#progressBar"); 
 
    var $barParent = $bar.parent(); 
 
    var perc = ~~($bar.width() * 100/$barParent.width()); 
 
    if(perc<100) $bar.css({ width : (perc+10) +"%" }); 
 
});

*{margin:0;} 
 
#progressBar{height:30px; background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="progressBar" style="width:50%"></div> 
 
<button id="increaseButton">INCREASE</button>