1

Ползунок прогресс-бара при нажатии кнопки "далее" перемещается на 20% вправо, и сумма скидки увеличивается на 2000 руб, переходит ко второму вопросу (этому блоку со списком ответов присваивается display: none; следующему - display: block) Нужно сделать так, чтобы это происходило при условии, что выбран ответ. Мой вариант не работает.

<div class="answers" id="answers1">
 <ul>
   <li>Частный дом</li>
   <li>Дача</li>
   <li>Производство</li>
   <li>Отель/гостиница</li>
   <li>Другое</li>
  </ul>
 </div>
<div class="sale-line">
 <div class="main-line">
   <div class="progress-line" id="progress-line">
   <span class="salesum">0</span> руб
  </div>
 </div>
</div>

 <a href="#" class="next-btn big-link">Дальше</a>

<style>
  .septik-select .sale-line .main-line {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: #167c80;
  padding: 0;
  margin-top: 182px; }

.septik-select .sale-line .main-line .progress-line {
  position: absolute;
  top: -28px;
  left: 0%;
  width: 20%;
  z-index: 100;
  border-bottom: 10px solid #167c80;
  text-align: center; 
</style>

  $(document).ready(function(){
    var im = 0
        $('.septik-select .answers ul li').click(function(event){
        event.preventDefault();
        im=1;
        }); 
    var it = 0  
        $('.septik-select .next-btn').click(function(event){
        event.preventDefault();
            it = it+2000;
            $('.septik-select .salesum').html(it);

            if (im=1 ){
            $('.septik-select .progress-line').animate({'left':'+=20%'})
                im=0;
                ;}
        }); 
});

1 ответ 1

0

$('.next-btn').click(function() {
   if($('.radio-ex').is(':checked')) { alert("it's checked"); }
});
 .septik-select .sale-line .main-line {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: #167c80;
  padding: 0;
  margin-top: 182px; }

.septik-select .sale-line .main-line .progress-line {
  position: absolute;
  top: -28px;
  left: 0%;
  width: 20%;
  z-index: 100;
  border-bottom: 10px solid #167c80;
  text-align: center; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answers" id="answers1">
  <input type="radio" class="radio-ex" name="example">
  <label>Частный дом</label>
  <input type="radio" class="radio-ex" name="example">
  <label>Дача</label>
  <input type="radio" class="radio-ex" name="example">
  <label>Производство</label>
 </div>
<div class="sale-line">
 <div class="main-line">
   <div class="progress-line" id="progress-line">
   <span class="salesum">0</span> руб
  </div>
 </div>
</div>

 <a href="#" class="next-btn big-link">Дальше</a>

1

Ваш ответ

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

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