1

По клику на кнопку далее должно переключаться на следующий блок и появляться кнопка назад. Как остановить переключение если блоков нет больше? В одну и другую сторону. И если по клику назад дошли до начала скрыть кнопку. (Если можно на JS это переделать)

$('.popup__btn_next').click(function(e) {
  let $current = $('.popup__tab._active');
  let $current2 = $('.popup__slot._active');
  $(this).siblings('.popup__btn_prev').show();

  $current.removeClass('_active');
  $current.next('.popup__tab').addClass('_active');
  $current2.next('.popup__slot').addClass('_active');
});

$('.popup__btn_prev').click(function(e) {
  let $current = $('.popup__tab._active');
  let $current2 = $('.popup__slot._active');

  $current.removeClass('_active');
  $current2.removeClass('_active');
  $current.prev('.popup__tab').addClass('_active');
  $current2.prev('.popup__slot').addClass('_active');
})
.popup {
  max-width: 969px;
  width: 100%;
}

.popup__tabs-body {
  margin: 0 0 128px;
}

.popup__tab {
  display: none;
}

.popup__tab._active {
  display: block;
}

.popup__title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  color: #0063b9;
  margin: 0 0 35px;
}

.popup__inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.popup__inner label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 253px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.4s ease 0s;
}

@media (any-hover: hover) {
  .popup__inner label:hover {
    filter: drop-shadow(0 0 5px rgba(0, 46, 166, 0.33));
    border-color: rgba(0, 46, 166, 0.33);
  }
}

.popup__inner label span {
  position: absolute;
  top: 100%;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 27px;
  text-align: center;
  color: #1e1e1e;
}

.popup__inner .popup__item_one label {
  background: #d8d8d8;
}

.popup__inner .popup__item_two label {
  background: #d8d8d8;
}

.popup__inner .popup__item_three label {
  background: #d8d8d8;
}

.popup__inner input[type=radio] {
  display: none;
}

.popup__inner input[type=radio]:checked~label {
  border-color: #002ea6;
  box-shadow: inset 0 0 34px 8px rgba(0, 0, 0, 0.15);
  scale: 1.1;
}

.popup__inner._inner-two .popup__item,
.popup__inner._inner-three .popup__item,
.popup__inner._inner-four .popup__item {
  height: fit-content;
}

.popup__inner._inner-two label,
.popup__inner._inner-three label,
.popup__inner._inner-four label {
  height: max-content;
  align-items: flex-start;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: #1E1E1E;
  background: #D8D8D8;
  padding: 22px;
}

.popup__item {
  position: relative;
  max-width: 253px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 263px;
}

.popup__buttons {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 41px;
}

.popup__btn_prev {
  display: none;
  --b: 1px;
  /* border width*/
  --r: 7px;
  /* the radius */
  position: relative;
  font-weight: 500;
  border: 1px solid transparent;
  color: rgba(27, 27, 27, 0.5);
}

.popup__btn_prev:before {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: var(--r);
  background: var(--c, linear-gradient(180deg, #0083c4 0%, #0033a7 100%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: var(--b);
  z-index: -1;
}

@media (any-hover: hover) {
  .popup__btn_prev:hover {
    color: #0033a7;
  }
}

.popup__btn_next {
  font-weight: 700;
  box-shadow: 0 4px 4px #000000;
  color: #ffffff;
  background: linear-gradient(180deg, #0088c7 0%, #002ea6 100%);
}

@media (any-hover: hover) {
  .popup__btn_next:hover {
    box-shadow: 0 1px 1px #000000;
  }
}

.popup__progress {
  display: flex;
  align-items: center;
  gap: 15px;
}

.popup__slot {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #cbcbcb;
}

.popup__slot._active {
  background: #003eb6;
}

.btn {
  width: 251px;
  height: 104px;
  font-size: 33px;
  border-radius: 7px;
  transition: all 0.4s ease 0s;
}

ul {
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup">
  <div class="popup__tabs" id="tabs">
    <div class="popup__tabs-body">
      <div class="popup__tab _active">
        <h2 class="popup__title">Какая ?</h2>
        <ul class="popup__inner _inner-one">
          <li class="popup__item popup__item_one"><input class="input" id="r1" type="radio" name="teeth" value="1"><label for="r1"><span>Нет </span></label></li>
          <li class="popup__item popup__item_two"><input class="input" id="r2" type="radio" name="teeth" value="2"><label for="r2"><span>Нет почти </span></label></li>
          <li class="popup__item popup__item_three"><input class="input" id="r3" type="radio" name="teeth" value="3"><label for="r3"><span>Нет всех </span></label></li>
        </ul>
      </div>
      <div class="popup__tab">
        <h2 class="popup__title">На </h2>
        <ul class="popup__inner _inner-two">
          <li class="popup__item"><input id="r4" type="radio" name="jaws"><label for="r4">На верхней</label></li>
          <li class="popup__item"><input id="r5" type="radio" name="jaws"><label for="r5">На нижней</label></li>
          <li class="popup__item"><input id="r6" type="radio" name="jaws"><label for="r6">На обеих</label></li>
        </ul>
      </div>
      <div class="popup__tab">
        <h2 class="popup__title">Как </h2>
        <ul class="popup__inner _inner-three">
          <li class="popup__item"><input id="r7" type="radio" name="how long"><label for="r7">Менее</label></li>
          <li class="popup__item"><input id="r8" type="radio" name="how long"><label for="r8">Полгода</label></li>
          <li class="popup__item"><input id="r9" type="radio" name="how long"><label for="r9">Сложно</label></li>
        </ul>
      </div>
      <div class="popup__tab">
        <h2 class="popup__title">Когда</h2>
        <ul class="popup__inner _inner-four">
          <li class="popup__item"><input id="r10" type="radio" name="planning"><label for="r10">Как</label></li>
          <li class="popup__item"><input id="r11" type="radio" name="planning"><label for="r11">В</label></li>
          <li class="popup__item"><input id="r12" type="radio" name="planning"><label for="r12">Сложно</label></li>
        </ul>
      </div>
    </div>
    <div class="popup__buttons" id="buttons"><button class="popup__btn btn popup__btn_prev" id="prev" type="button">Назад</button><button class="popup__btn btn popup__btn_next" id="next" type="button">Далее</button></div>
    <ul class="popup__progress" id="progress">
      <li class="popup__slot _active"></li>
      <li class="popup__slot"></li>
      <li class="popup__slot"></li>
      <li class="popup__slot"></li>
    </ul>
  </div>
</div>

1 ответ 1

1

Достаточно добавить пару условий, которые будут проверять, совпадает ли индекс активного элемента с количеством аналогичных элементов в коллекции или не равен ли нулю:

$('.popup__btn_next').click(function(e) {
  let $current = $('.popup__tab._active');
  let $current2 = $('.popup__slot._active');

  $current.removeClass('_active');
  $current.next('.popup__tab').addClass('_active');
  $current2.next('.popup__slot').addClass('_active');
  
  if ( $('.popup__tab._active').index() == $('.popup__tab').length - 1) { $(this).hide(); } 
  else { $(this).siblings('.popup__btn_prev').show(); }
});

$('.popup__btn_prev').click(function(e) {
  let $current = $('.popup__tab._active');
  let $current2 = $('.popup__slot._active');

  $current.removeClass('_active');
  $current2.removeClass('_active');
  $current.prev('.popup__tab').addClass('_active');
  $current2.prev('.popup__slot').addClass('_active');
  
  if ( $('.popup__tab._active').index() == 0) { $(this).hide(); } 
  else { $(this).siblings('.popup__btn_next').show(); }
})
.popup {
  max-width: 969px;
  width: 100%;
}

.popup__tabs-body {
  margin: 0 0 128px;
}

.popup__tab {
  display: none;
}

.popup__tab._active {
  display: block;
}

.popup__title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  color: #0063b9;
  margin: 0 0 35px;
}

.popup__inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.popup__inner label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 253px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.4s ease 0s;
}

@media (any-hover: hover) {
  .popup__inner label:hover {
    filter: drop-shadow(0 0 5px rgba(0, 46, 166, 0.33));
    border-color: rgba(0, 46, 166, 0.33);
  }
}

.popup__inner label span {
  position: absolute;
  top: 100%;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 27px;
  text-align: center;
  color: #1e1e1e;
}

.popup__inner .popup__item_one label {
  background: #d8d8d8;
}

.popup__inner .popup__item_two label {
  background: #d8d8d8;
}

.popup__inner .popup__item_three label {
  background: #d8d8d8;
}

.popup__inner input[type=radio] {
  display: none;
}

.popup__inner input[type=radio]:checked~label {
  border-color: #002ea6;
  box-shadow: inset 0 0 34px 8px rgba(0, 0, 0, 0.15);
  scale: 1.1;
}

.popup__inner._inner-two .popup__item,
.popup__inner._inner-three .popup__item,
.popup__inner._inner-four .popup__item {
  height: fit-content;
}

.popup__inner._inner-two label,
.popup__inner._inner-three label,
.popup__inner._inner-four label {
  height: max-content;
  align-items: flex-start;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: #1E1E1E;
  background: #D8D8D8;
  padding: 22px;
}

.popup__item {
  position: relative;
  max-width: 253px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 263px;
}

.popup__buttons {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 41px;
}

.popup__btn_prev {
  display: none;
  --b: 1px;
  /* border width*/
  --r: 7px;
  /* the radius */
  position: relative;
  font-weight: 500;
  border: 1px solid transparent;
  color: rgba(27, 27, 27, 0.5);
}

.popup__btn_prev:before {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: var(--r);
  background: var(--c, linear-gradient(180deg, #0083c4 0%, #0033a7 100%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: var(--b);
  z-index: -1;
}

@media (any-hover: hover) {
  .popup__btn_prev:hover {
    color: #0033a7;
  }
}

.popup__btn_next {
  font-weight: 700;
  box-shadow: 0 4px 4px #000000;
  color: #ffffff;
  background: linear-gradient(180deg, #0088c7 0%, #002ea6 100%);
}

@media (any-hover: hover) {
  .popup__btn_next:hover {
    box-shadow: 0 1px 1px #000000;
  }
}

.popup__progress {
  display: flex;
  align-items: center;
  gap: 15px;
}

.popup__slot {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #cbcbcb;
}

.popup__slot._active {
  background: #003eb6;
}

.btn {
  width: 251px;
  height: 104px;
  font-size: 33px;
  border-radius: 7px;
  transition: all 0.4s ease 0s;
}

ul {
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup">
  <div class="popup__tabs" id="tabs">
    <div class="popup__tabs-body">
      <div class="popup__tab _active">
        <h2 class="popup__title">Какая ?</h2>
        <ul class="popup__inner _inner-one">
          <li class="popup__item popup__item_one"><input class="input" id="r1" type="radio" name="teeth" value="1"><label for="r1"><span>Нет </span></label></li>
          <li class="popup__item popup__item_two"><input class="input" id="r2" type="radio" name="teeth" value="2"><label for="r2"><span>Нет почти </span></label></li>
          <li class="popup__item popup__item_three"><input class="input" id="r3" type="radio" name="teeth" value="3"><label for="r3"><span>Нет всех </span></label></li>
        </ul>
      </div>
      <div class="popup__tab">
        <h2 class="popup__title">На </h2>
        <ul class="popup__inner _inner-two">
          <li class="popup__item"><input id="r4" type="radio" name="jaws"><label for="r4">На верхней</label></li>
          <li class="popup__item"><input id="r5" type="radio" name="jaws"><label for="r5">На нижней</label></li>
          <li class="popup__item"><input id="r6" type="radio" name="jaws"><label for="r6">На обеих</label></li>
        </ul>
      </div>
      <div class="popup__tab">
        <h2 class="popup__title">Как </h2>
        <ul class="popup__inner _inner-three">
          <li class="popup__item"><input id="r7" type="radio" name="how long"><label for="r7">Менее</label></li>
          <li class="popup__item"><input id="r8" type="radio" name="how long"><label for="r8">Полгода</label></li>
          <li class="popup__item"><input id="r9" type="radio" name="how long"><label for="r9">Сложно</label></li>
        </ul>
      </div>
      <div class="popup__tab">
        <h2 class="popup__title">Когда</h2>
        <ul class="popup__inner _inner-four">
          <li class="popup__item"><input id="r10" type="radio" name="planning"><label for="r10">Как</label></li>
          <li class="popup__item"><input id="r11" type="radio" name="planning"><label for="r11">В</label></li>
          <li class="popup__item"><input id="r12" type="radio" name="planning"><label for="r12">Сложно</label></li>
        </ul>
      </div>
    </div>
    <div class="popup__buttons" id="buttons"><button class="popup__btn btn popup__btn_prev" id="prev" type="button">Назад</button><button class="popup__btn btn popup__btn_next" id="next" type="button">Далее</button></div>
    <ul class="popup__progress" id="progress">
      <li class="popup__slot _active"></li>
      <li class="popup__slot"></li>
      <li class="popup__slot"></li>
      <li class="popup__slot"></li>
    </ul>
  </div>
</div>

Ваш ответ

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

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