0

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

$(document).ready(() => {

  let quiz_item = 0;
  $('.quiz-item').each(function(key) {
    quiz_item = key;
  });

  let ind = 1;
  $('.next').click(function() {
    if (!$('.quiz-item').last().hasClass('active')) {
      move(true);

      var i = ind++;

      if (i < 2) {
        $('.progress-bar').css('width', 100 / quiz_item + '%');
      } else {
        $('.progress-bar').css('width', (100 / quiz_item) + (100 / quiz_item) + '%');
      }
    }
  });

  $('.prev').click(function() {
    if (!$('.quiz-item').first().hasClass('active')) {
      move(false);
    }
  });

  function move(direction) {
    direction
      ?
      $('.active')
      .removeClass('active')
      .next()
      .addClass('active') :
      $('.active')
      .removeClass('active')
      .prev()
      .addClass('active');
  }
})
/* line 1, ../quiz/assets/scss/_main.scss */

html,
body {
  font-family: 'Montserrat';
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}


/* Section */


/* line 1, ../quiz/assets/scss/_general.scss */

* {
  margin: 0;
  padding: 0;
}


/* line 6, ../quiz/assets/scss/_general.scss */

body {
  font-family: 'Montserrat';
}


/* line 10, ../quiz/assets/scss/_general.scss */

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: 0 !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important;
}


/* line 35, ../quiz/assets/scss/_general.scss */

select:focus,
input:focus,
textarea:focus {
  border-color: #272727 !important;
  box-shadow: none !important;
}


/* line 42, ../quiz/assets/scss/_general.scss */

input:not([type="checkbox"]),
textarea {
  background-color: transparent !important;
  padding: 15px !important;
}


/* line 47, ../quiz/assets/scss/_general.scss */

textarea {
  min-height: 150px;
}


/* line 51, ../quiz/assets/scss/_general.scss */

input {
  color: #fff;
}


/* line 55, ../quiz/assets/scss/_general.scss */

.link {
  color: #000;
  text-decoration: none;
}


/* line 59, ../quiz/assets/scss/_general.scss */

.link:hover {
  color: #000;
}


/* line 1, ../quiz/assets/scss/_color.scss */

* {
  --main-text: #000;
  --text-span: rgba(255, 135, 67, 1);
  --main-promo: #A3B6C1;
  --main-background: #F6F6F6;
  --text-green: #56C167;
  --text-white: #fff;
  --text-green-hover: #2DAF42;
  --btn-shadow-green: 0px 5px 48px -10px rgba(86, 193, 103, 0.6);
}


/* line 3, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item {
  display: none;
}


/* line 6, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item.active {
  display: block;
}


/* line 10, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item .quiz-title {
  padding: 20px 0;
}


/* line 16, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn {
  width: 187px;
  font-size: 17px;
  background-color: var(--text-green);
  color: var(--text-white);
  -webkit-box-shadow: var(--btn-shadow-green);
  -moz-box-shadow: var(--btn-shadow-green);
  box-shadow: var(--btn-shadow-green);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}


/* line 25, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn:hover {
  background-color: var(--text-green-hover);
  color: var(--text-white);
}

@media (max-width: 767px) {
  /* line 16, ../quiz/assets/scss/_quiz.scss */
  section#quiz .quiz-btn {
    font-size: 17px;
  }
}


/*# sourceMappingURL=style.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<section id="quiz" class="quiz my-5">
  <div class="container">
    <div class="quiz-items">
      <div class="progress mb-5">
        <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="quiz-item text-center active">
        <div class="quiz-title">
          <h1>Заявка на расчет стоимости!</h1>
        </div>
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 1" id="checkbox1">
          <label class="form-check-label" for="checkbox1">
                            Тест 1
                        </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
          <label class="form-check-label" for="checkbox2">
                            Тест 2
                        </label>
        </div>
      </div>
      <div class="quiz-item">
        <input type="text" class="form-control" placeholder="">
        <input type="text" class="form-control" placeholder="">
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
          <label class="form-check-label" for="checkbox2">
                            Тест 2
                        </label>
        </div>
      </div>
    </div>
    <div class="quiz-nav mt-5">
      <div class="d-flex justify-content-between">
        <a href="#!" class="btn quiz-btn prev">Назад</a>
        <a href="#!" class="btn quiz-btn next">Вперед</a>
      </div>
    </div>
  </div>
</section>

1 ответ 1

1

Упростила код и скорректировала работу. В первую очередь - пусть jquery сам определяет актуальный индекс. И на основе этого - убрать лишние условия и считать проценты.

$(document).ready(() => {
  let allIndex = $('.quiz-item').length;

  $('.next').click(function() {
    let activeIndex = $('.quiz-item.active').index();
    if (activeIndex === allIndex) return;
    move(true);
    $('.progress-bar').css('width', activeIndex * 100 / (allIndex - 1) + '%')
  });

  $('.prev').click(function() {
    let activeIndex = $('.quiz-item.active').index();
    if (activeIndex === 1) return;
    move(false);
    $('.progress-bar').css('width', (activeIndex - 2) * 100 / (allIndex - 1) + '%')
  });

  function move(direction) {
    direction
      ?
      $('.active')
      .removeClass('active')
      .next()
      .addClass('active') :
      $('.active')
      .removeClass('active')
      .prev()
      .addClass('active');
  }
})
/* line 1, ../quiz/assets/scss/_main.scss */

html,
body {
  font-family: 'Montserrat';
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}


/* Section */


/* line 1, ../quiz/assets/scss/_general.scss */

* {
  margin: 0;
  padding: 0;
}


/* line 6, ../quiz/assets/scss/_general.scss */

body {
  font-family: 'Montserrat';
}


/* line 10, ../quiz/assets/scss/_general.scss */

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: 0 !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important;
}


/* line 35, ../quiz/assets/scss/_general.scss */

select:focus,
input:focus,
textarea:focus {
  border-color: #272727 !important;
  box-shadow: none !important;
}


/* line 42, ../quiz/assets/scss/_general.scss */

input:not([type="checkbox"]),
textarea {
  background-color: transparent !important;
  padding: 15px !important;
}


/* line 47, ../quiz/assets/scss/_general.scss */

textarea {
  min-height: 150px;
}


/* line 51, ../quiz/assets/scss/_general.scss */

input {
  color: #fff;
}


/* line 55, ../quiz/assets/scss/_general.scss */

.link {
  color: #000;
  text-decoration: none;
}


/* line 59, ../quiz/assets/scss/_general.scss */

.link:hover {
  color: #000;
}


/* line 1, ../quiz/assets/scss/_color.scss */

* {
  --main-text: #000;
  --text-span: rgba(255, 135, 67, 1);
  --main-promo: #A3B6C1;
  --main-background: #F6F6F6;
  --text-green: #56C167;
  --text-white: #fff;
  --text-green-hover: #2DAF42;
  --btn-shadow-green: 0px 5px 48px -10px rgba(86, 193, 103, 0.6);
}


/* line 3, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item {
  display: none;
}


/* line 6, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item.active {
  display: block;
}


/* line 10, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item .quiz-title {
  padding: 20px 0;
}


/* line 16, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn {
  width: 187px;
  font-size: 17px;
  background-color: var(--text-green);
  color: var(--text-white);
  -webkit-box-shadow: var(--btn-shadow-green);
  -moz-box-shadow: var(--btn-shadow-green);
  box-shadow: var(--btn-shadow-green);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}


/* line 25, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn:hover {
  background-color: var(--text-green-hover);
  color: var(--text-white);
}

@media (max-width: 767px) {
  /* line 16, ../quiz/assets/scss/_quiz.scss */
  section#quiz .quiz-btn {
    font-size: 17px;
  }
}


/*# sourceMappingURL=style.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<section id="quiz" class="quiz my-5">
  <div class="container">
    <div class="quiz-items">
      <div class="progress mb-5">
        <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="quiz-item text-center active">
        <div class="quiz-title">
          <h1>Заявка на расчет стоимости!</h1>
        </div>
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 1" id="checkbox1">
          <label class="form-check-label" for="checkbox1">Тест 1</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
          <label class="form-check-label" for="checkbox2">Тест 2</label>
        </div>
      </div>
      <div class="quiz-item">
        <input type="text" class="form-control" placeholder="">
        <input type="text" class="form-control" placeholder="">
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 3" id="checkbox3">
          <label class="form-check-label" for="checkbox3">Тест 3</label>
        </div>
      </div>
    </div>
    <div class="quiz-nav mt-5">
      <div class="d-flex justify-content-between">
        <a href="#!" class="btn quiz-btn prev">Назад</a>
        <a href="#!" class="btn quiz-btn next">Вперед</a>
      </div>
    </div>
  </div>
</section>

Ваш ответ

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

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