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

Question

[damarkuzz]

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

Answer 1

[0xD34F]

const buttonSelector = 'input[name="group"]';
const contentSelector = '.click';
const activeClass = 'show';


// делегирование, обработчик события добавляем один раз, на документ;
// соответствие между радиокнопками и блоками устанавливаем через равенство атрибутов
document.addEventListener('change', ({ target: t }) => {
  if (t.matches(buttonSelector)) {
    document.querySelectorAll(contentSelector).forEach(n => {
      n.classList.toggle(activeClass, n.dataset.click === t.id);
    });
  }
});

// или, назначаем обработчик события каждой кнопке индивидуально;
// соответствие между радиокнопками и блоками устанавливаем через равенство индексов
const buttons = document.querySelectorAll(buttonSelector);
const contents = document.querySelectorAll(contentSelector);

buttons.forEach(n => n.addEventListener('change', onChange));

function onChange() {
  const index = Array.prototype.indexOf.call(buttons, this);
  contents.forEach((n, i) => n.classList.toggle(activeClass, i === index));
}