Question

我想把它设为+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 + '%');
});

但仅限于progressbar width 300px上的{{1}} {/ 1}}。

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

进度增加值不符合百分比

5 个答案: