javascript - 进度增加值不适用于百分比

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() 您可以看到您使用的宽度不是百分比，而是像素单位。

尝试直接访问样式属性以检索“xx%”值。

Answer 2

试试这个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
});

Answer 3

试试下面的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 4

在您的情况下，这确实有效：（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 + '%');
});

但前提是你让你progressbar width的300px。

Answer 5

试试这个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 + '%');
});