進步增加值不會與工作百分比以及

Question

http://jsfiddle.net/2gsNy/1/

我想使它+10，爲第一，但第二和增加它的方式比10後的工作..

我的js

$('#test').on('click', function (e) { 
    $this = $('#progressbarr > div').width(); 
    var i = $this + 10; 
    $('#progressbarr > div').css('width', (i + '%')); 

    $progress_bar = $('#progressbarr'); 
    var progressbar_width = Math.floor(100 * ($progress_bar.find('div').width())/$progress_bar.width()); 
    $progress_bar.find('span').text(progressbar_width + '%'); 

}); 

Answer 1

如果使用console.log（），可以看到您使用的寬度不是百分比，而是以像素爲單位。

嘗試直接訪問style屬性以檢索「xx％」值。

Answer 2

嘗試以下jsfiddle

在CSS中，改變

#progressbarr > div { 
    background-color: green; 
    width: 0px; 
    height: 25px; 
    border-bottom-left-radius: 4px; 
    border-top-left-radius: 4px; 
} 

jQuery的

$('#test').on('click', function (e) { 
    $this = $('#progressbarr > div').width(); 
    var i = $this + 30;   

    $progress_bar = $('#progressbarr'); 
    var progressbar_width = Math.floor(100 * (i)/$progress_bar.width());   

    if (progressbar_width <= 100) 
    { 
     $('#progressbarr > div').css('width', (i + 'px')); 
     $progress_bar.find('span').text(progressbar_width + '%'); 
    } 
}); 

Answer 3

你的情況，這樣做的工作：(jsFiddle)

$('#test').on('click', function (e) { 
    $progress_bar = $('#progressbar'); 

    var i = 30; 
    $('#progressbar > div').css('width', '+=' + (i + 'px')); 


    var progressbar_width = Math.floor(100 * ($progress_bar.find('div').width())/$progress_bar.width()); 
    $progress_bar.find('span').text(progressbar_width + '%'); 
}); 

但只有當你讓progressbarwidth在300px。

Answer 4

嘗試這種http://jsfiddle.net/devmgs/2gsNy/7/

$('#test').on('click', function (e) { 
    var width = $('#progressbarr > div').width(); 
    var parentWidth = $('#progressbarr').width(); 
    var percent = 100*width/parentWidth; 
    console.log(percent); 
    percent+=10; 
    $('#progressbarr > div').width(percent+"%"); 
    $('#progressbarr > div').find('span').text(percent + '%'); 
}); 

Answer 5

嘗試此jsfiddle

$('#test').on('click', function (e) { 
    var progress = parseInt($(".percentage").html()); 
     $this = $('#progressbarr > div').width(); 
    var i = progress + 10; 
    $('#progressbarr > div').css('width', (i + '%')); 

    $progress_bar = $('#progressbarr'); 
    var progressbar_width = Math.floor(100 * ($progress_bar.find('div').width())/$progress_bar.width()); 
    $progress_bar.find('span').text(progressbar_width + '%'); 

    // if 
});