Задать класс по клику на input тому блоку, класс которого совпадает с id input'a

Question

Как задать класс show по клику на input тому блоку, класс которого совпадает с id input'a?

.click1, .click2 {
  display: none;
}
label {
display: block;
}

<label>
  <input id="click1" type="radio" name="group">
  <span>Кликни по мне</span>
</label>
<label>
  <input id="click2" type="radio"  name="group">
  <span>Или по мне</span>
</label>

<div class="click1">Это - Click1</div>
<div class="click2">Это - Click2</div>

Answer 1

document.addEventListener('click', fAddClass);

function fAddClass(ev) {
  if (ev.target.tagName.toLowerCase() != 'input') return;
  document.querySelector(`.${ev.target.id}`).classList.add('show');
}

label { display: block; }
.click1, .click2 { display: none; }
.show { display: block; }

<label>
  <input id="click1" type="radio" name="group">
  <span>Кликни по мне</span>
</label>
<label>
  <input id="click2" type="radio"  name="group">
  <span>Или по мне</span>
</label>

<div class="click1">Это - Click1</div>
<div class="click2">Это - Click2</div>

Для скрытия уже показанных блоков:

document.addEventListener('click', fAddClass);

function fAddClass(ev) {
  if (ev.target.tagName.toLowerCase() != 'input') return;
  document.querySelectorAll(`.show`).forEach( el => el.classList.remove('show') );
  document.querySelector(`.${ev.target.id}`).classList.add('show');
}

label { display: block; }
.click1, .click2 { display: none; }
.show { display: block; }

<label>
  <input id="click1" type="radio" name="group">
  <span>Кликни по мне</span>
</label>
<label>
  <input id="click2" type="radio"  name="group">
  <span>Или по мне</span>
</label>

<div class="click1">Это - Click1</div>
<div class="click2">Это - Click2</div>

Пользовательский атрибут в селекторе:

document.addEventListener('click', fAddClass);

function fAddClass(ev) {
  if (ev.target.tagName.toLowerCase() != 'input') return;
  document.querySelectorAll(`.show`).forEach( el => el.classList.remove('show') );
  document.querySelector(`[data-select="${ev.target.id}"]`).classList.add('show');
}

label { display: block; }
.click1, .click2 { display: none; }
.show { display: block; }

<label>
  <input id="click1" type="radio" name="group">
  <span>Кликни по мне</span>
</label>
<label>
  <input id="click2" type="radio"  name="group">
  <span>Или по мне</span>
</label>

<div data-select="click1" class="click1">Это - Click1</div>
<div data-select="click2" class="click2">Это - Click2</div>

БЛОГ НА HUSL

Задать класс по клику на input тому блоку, класс которого совпадает с id input'a

Ответы (1 шт):