0

Учу JS и самостоятельно не смог найти ответ. Впервые задаю вопрос на этой площадке, так что заранее прошу прощения. Есть код:

let inp = document.querySelectorAll('.b');
let box = document.querySelectorAll('.box');

for (let i = 0; i < inp.length; i++) {
  if (inp[i].checked) {
    box[i].classList.add('active');
  }
  for (let i = 0; i < inp.length; i++) {
    inp[i].addEventListener('change', () => {
      box[0].classList.remove('active');
      box[1].classList.remove('active');
      box[2].classList.remove('active');
      box[i].classList.add('active');
    });
  }
}
.box {
  display: none;
}
.box.active {
  display: block;
}
<input class="b" type="radio" name="r" value="one" checked />
    <input class="b" type="radio" name="r" value="two" />
    <input class="b" type="radio" name="r" value="three" />
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>

Вроде все переключается, но мне не нравится и я не знаю как сделать, чтобы не удалять каждый класс отдельно: box[0], box[1] и т.д. Прошу подсказать, как это можно сделать элегантнее.

2
  • box.forEach((b) => b.classList.remove('active')); 15 янв 2022 в 8:38
  • Огромнейшее спасибо! 15 янв 2022 в 8:50

1 ответ 1

0

Сделал правки в код, с двумя циклами for я, конечно, погорячился. Может кому пригодится:

let inp = document.querySelectorAll('.inp');
let box = document.querySelectorAll('.box');

for (let i = 0; i < inp.length; i++) {
  if (inp[i].checked) {
    box[i].classList.add('active');
  }
  inp[i].addEventListener('change', () => {
    box.forEach((el) => el.classList.remove('active'));
    box[i].classList.add('active');
  });
}
.box {
  display: none;
}
.box.active {
  display: block;
}
    <input class="inp" type="radio" name="r" checked />
    <input class="inp" type="radio" name="r" />
    <input class="inp" type="radio" name="r" />
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>

Ваш ответ

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

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