значение увеличения прогресса не работает с процентами

Question

значение увеличения прогресса не работает с процентами

0

Я хочу сделать это +10, работать на 1-й, а второй и после него увеличить путь, чем 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 + '%');

});

Ulises Colen 26 сен. 2013, в 09:34

Источник

Теги:

javascript

jquery

5 ответов

Ещё вопросы

sandip patil · Answer 1 · 2013-09-26T06-26-00.000Z

Попробуйте этот 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
});

dev · Answer 2 · 2013-09-26T06-07-00.000Z

попробуйте это 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 + '%');
});

cubitouch · Answer 3 · 2013-09-26T05-58-00.000Z

Если вы используете console.log(), вы можете видеть, что используемая ширина не в процентах, а в пиксельной единице.

Попробуйте получить доступ к атрибуту style напрямую, чтобы получить значение "xx%".

решен $ this = Math.floor (100 * ($ ('# progressbarr> div'). width () / $ ('# progressbarr'). width ())); var i = $ this + 10; $ ('# progressbarr> div'). css ('width', (i + '%')); Спасибо

Saranya Sadhasivam · Answer 4 · 2013-09-26T05-50-00.000Z

Попробуйте ниже 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 + '%');
    }
});

Martin · Answer 5 · 2013-09-26T05-47-00.000Z

В вашем случае это работает: (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.