Как сделать чтоб при клике каждый раз добавлялся % ширины элемента?

Question

[Павел]

$(".next").click(function(){
   $(".progress-bar").css({"width":"+10%"});

.....
...
..

Хочу сделать бутстрп прогрессбар , надо в .progress-bar просто выставлять % ширины от 0 до 100 , у меня 2 кнопки , назад и вперед , как сделать чтоб каждый раз при клике css плюсовался с текущим? В моем примере хоть как не делай только 10% устанавливается и все

https://codepen.io/mrusklon/pen/NgxXxL

Answer 1

[Dmitry Tallmange]

$(".progress-bar").css({"width":"+10%"});
так не пройдет, необходимо передавать абсолютное значение, а не относительное.

Comments

[Павел]

а как это сделать? Я новичек в js , как то Math.abs юзать?

[Леонид Князев]

Нет. Вам нужно взять текущее значение ширины элемента, прибавить к нему необходимое число и обновить его у элемента установив новое полученное значение.

[Dmitry Tallmange]

mrusklon: хранить где-то текущее значение, каждый раз при клике брать его, изменять на некий шаг, затем передавать это в выражение выше вместо "+10%"

[Ankhena]

mrusklon: Только % надо брать не от текущей ширины, а то в 100 не поместитесь :)

Answer 2

[Александр Фёдорцев]

var width=$(".progress-bar").css("width");
width=parseInt(width);
width+=(width*0.1);
$(".progress-bar").css({"width":`${width}`});

Comments

[Ankhena]

Тоже самое. "Прибавки" будут неравными.
Надо либо брать % от родителя либо запоминать первый результат.

[Павел]

что то не работает https://codepen.io/mrusklon/pen/NgxXxL

[Александр Фёдорцев]

Ankhena W: Вы правы. Но я больше про путь к решению. Ибо хз кто родитель.

[Павел]

<div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="0"
                     aria-valuemin="0" aria-valuemax="100" style="width: 0;">
                    70%
                </div>
            </div>

[Dmitry Tallmange]

Перестаньте давать готовые решения) Хватит потакать лени)

[Ankhena]

Александр Фёдорцев:

Ибо хз кто родитель.

да здравствует пятница ))))))))))))

[Павел]

Dmitry Tallmange: ну не давайте рыбу , дайте удочку )) я не пойму в каком направлении гуглить

[Александр Фёдорцев]

что то не работает

Кавычки не те! ' вместо ` у вас

каком направлении гуглить

var width=$("/*Родитель*/").css("width");
$("/*Потомок*/").css({"width":`${width}`});

[Павел]

Александр Фёдорцев: а в чем логика такой конструкции? Зачем знать родителя? Почему нельзя получить текущее значение добавить к нему 10% и записать обратно?

[Александр Фёдорцев]

mrusklon: Ankhena W вам писал об этом. Если не согласны с его логикой, делайте так как вам видится.

[Павел]

Александр Фёдорцев: https://codepen.io/mrusklon/pen/NgxXxL , подскажи в чем косяк?( может имя переменной как-то особым образом надо задавать?

[Александр Фёдорцев]

+ "px" убери.
$(".progress-bar").css("width", width); вот такое оставь.

[Александр Фёдорцев]

mrusklon: А чего не так? Работает и с "рх"...

[Ankhena]

mrusklon: Сначала ширину родителя. Потом click(function(){}). Иначе родитель тоже может вырасти.

Сделай console.log(width); и посмотри по сколько прибавляется.

Александр Фёдорцев:

Если не согласны с его логикой

её

[Александр Фёдорцев]

Ankhena W: Ох, простите. Не вчитался.