Перемещение ползунка прогресс-бара

219

28 апреля 2017, 17:05

Есть тест из 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%'});
});

Answer 1

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