1

Столкнулся с такой проблемой, пока добавляю ширину в px все порядке, а в процентах выходит какая то ерунда.

Должно каждый этап добавляться 25% к ширине progress-bar

https://codepen.io/s0nly/pen/GMxPrX

function stepByStepForm() {
    var nextStepBtn = $('.next-btn'),
        prevStepBtn = $('.prev-btn'),
        step = $('.step'),
        stepField = $('.step__field');

    nextStepBtn.on('click', function (e) {
        var progressBarValue = $('.progress-bar').width(),
            progressBarStep = parseInt(progressBarValue += 100 / step.length);

        e.preventDefault();
        if($(this).parent().find(stepField).val().length <= 0){
            alert('Не заполнены поля')
        } else{
            $('.progress-bar').width(progressBarStep + '%');
            step.fadeOut(0);
            $(this).parent().next(step).show();
        }
    });

    prevStepBtn.on('click', function (e) {
        e.preventDefault();
            step.fadeOut(0);
            $(this).parent().prev(step).show();
    });
}

stepByStepForm();
6
  • А какая именно ерунда? 9 окт 2017 в 13:10
  • Добавляется не 25%, а какое то иное значение. если здесь: $('.progress-bar').width(progressBarStep + '%'); убрать проценты, то все будет ок
    – s0nly
    9 окт 2017 в 13:12
  • Я смотрю там, и добавляется все точно. 9 окт 2017 в 13:13
  • Первый раз добавляет 25% все верно, а вот далее уже значение меняется, а хотелось бы каждый шаг +25%, вот с этим проблема
    – s0nly
    9 окт 2017 в 13:15
  • У вас должны быть 4 этапа и каждый раз добавляться 25% к ширине? 9 окт 2017 в 13:19

1 ответ 1

2

Вот так вам было нужно?

Ваша ошибка была здесь progressBarStep = parseInt(progressBarValue += 100 / step.length);.

progressBarValue это значение в пикселях, и не важно в стиле вы как добавили свойство для ширины у блока. у вас пиксели прибавлялись к процентам, и получилась ошибка.

var stepp = 0;
function stepByStepForm() {
    var nextStepBtn = $('.next-btn'),
            prevStepBtn = $('.prev-btn'),
            step = $('.step'),
            stepField = $('.step__field');

    nextStepBtn.on('click', function(e) {
        stepp = stepp + 1;
        var percent = parseInt(100/step.length);
        console.log(percent);
        var progressBarStep = stepp * percent;
        e.preventDefault();
        if ($(this).parent().find(stepField).val().length <= 0) {
            alert('Не заполнены поля')
        } else {
            $('.progress-bar').width(progressBarStep + '%');
            step.fadeOut(0);
            $(this).parent().next(step).show();
        }
    });

    prevStepBtn.on('click', function(e) {
        stepp--;
        var progressBarStep = stepp * 25;
        $('.progress-bar').width(progressBarStep + '%');
        e.preventDefault();
        step.fadeOut(0);
        $(this).parent().prev(step).show();
    });
}

stepByStepForm();
.progress-bar{
  height: 20px;
  width: 0%;
  background: green;
  transition: .5s width;
}

.step.first{
  display: block;
}

.step{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
    <form action="">

        <div class="progress-bar"></div>

        <div class="step first">
            <label>
                <input type="text" placeholder="1" class="step__field">
            </label>

            <a href="" class="next-btn">Далее</a>
        </div>
        <div class="step">

            <label>
                <input type="text" placeholder="2" class="step__field">
            </label>

            <a href="" class="prev-btn">Назад</a>
            <a href="" class="next-btn">Далее</a>
        </div>
        <div class="step">
            <label>
                <input type="text" placeholder="3" class="step__field">
            </label>
            <a href="" class="prev-btn">Назад</a>
            <a href="" class="next-btn">Далее</a>
        </div>
        <div class="step">
            <label>
                <input type="text" placeholder="3" class="step__field">
            </label>
            <a href="" class="prev-btn">Назад</a>
            <a href="" class="next-btn">Далее</a>
        </div>
        <div class="step">
            end
        </div>
    </form>
</div>

Вот так уже определяются проценты по количеству шагов.

7
  • Результат нужен такой, да. Но у меня кол-во процентов в шаге зависит от кол-ва шагов. progressBarStep = parseInt(progressBarValue += 100 / step.length);
    – s0nly
    9 окт 2017 в 13:30
  • @s0nly Как у вас определяется количество шагов? 9 окт 2017 в 13:32
  • В зависимости от кол-ва элементов .step в верстке
    – s0nly
    9 окт 2017 в 13:33
  • @s0nly сейчас изменю ответ 9 окт 2017 в 13:34
  • @s0nly Вот так да вы хотели? 9 окт 2017 в 13:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.