0

Есть тест из 5 вопросов, на экране виден только 1 вопрос.При выборе ответа и нажатии кнопки "далее" появляется следующий вопрос. Ползунок на прогресс-баре при ответе на 1 вопрос должен сдвигаться на 20% вправо. Не получается нормально реализовать эту функцию. Подскажите, как было бы правильнее это сделать?

                        <div class="question-select">
                            <div class="answer-number">
                                <span>Вопрос 2 из 5</span>
                                <h2>Сколько человек будет пользоваться канализацией?</h2>
                            </div>


                            <div class="answers" id="answers1">
                                <ul>
                                    <li>от 1 до 4</li>
                                    <li>от 5 до 7</li>
                                    <li>от 7 до 10</li>
                                    <li>от 10 до 15</li>
                                    <li>от 15 до 20</li>
                                    <li>от 20 и более</li>
                                </ul>
                            </div>
                    </div>

$('#answers1 li').click(function(){
    $(".progress-line").animate({left: '+=20%'});
});
1
  • 1
    Добавте код, который ещё не получился.
    – 0xdb
    Commented 27 апр. 2017 в 13:49

1 ответ 1

0

var ch = $('ul li');
$('ul').on('click', 'li', function () {
    var n=ch.index(this)* 20 + 20;    
    $('#progressbar').val(n+"");
});
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-select">
  <div class="answer-number">
    <span>Вопрос 2 из 5</span>
    <h2>Сколько человек будет пользоваться канализацией?</h2>
  </div>


  <div class="answers" id="answers1">
    <ul>
      <li>от 1 до 4</li>
      <li>от 5 до 7</li>
      <li>от 7 до 10</li>
      <li>от 10 до 15</li>
      <li>от 15 до 20</li>
    </ul>
  </div>
</div>
<progress id="progressbar" value="0" max="100"></progress>

если шаг 20 и вариантов 6 тогда свойство мах для прогресс бара установите на 120

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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