Как реализовать различные стратегии выбора элементов, в зависимости от блоков, в которых они находятся?

Question

[Kipsi]

Как сделать так именно на чистом JS без JQ, чтобы при нажатии на элементы им добавлялся класс active и в "Выбрать пол" можно было выбрать только 1 элемент одновременно как у radio, а в "Выбрать тип одежды" можно было выбирать много пунктов как у checkbox и при повторном нажатие убирать класс, а при нажатие на кнопку "Выбрать все категории" она получала active, а все остальные сбрасывались в неактивное состояние. И при повторном нажатие на другие кнопки уже убирался класс active с "Выбрать все категории".

HTML

<div slass="filter-wrap">
  <div class="filter">
    <div class="item">
      <h2>Выбрать все категории</h2>
      <button type="button" class="active">Показать все товары</button>
    </div>
    <div class="item">
      <h2>Выбрать пол</h2>
      <button type="button">Женские вещи</button>
      <button type="button">Мужские вещи</button>
      <button type="button">Детские вещи</button>
     </div>
     <div class="item">
      <h2>Выбрать тип одежды</h2>
      <button type="button">Обувь</button>
      <button type="button">Верхняя одежда</button>
      <button type="button">Головные уборы</button>
      <button type="button">Костюмы</button>
      <button type="button">Брюки</button>
      <button type="button">Шорты</button>
      <button type="button">Украшения</button>
      <button type="button">Пижамы</button>
      <button type="button">Униформа</button>
    </div>
  </div>
</div>

CSS

.active {
  background: green;
  color: white;
}

button {
  border: none;
  background: red;
  width: 200px;
  height: 30px;
  margin-bottom: 10px;
}

button:hover {
  background: silver;
}

Answer 1

[0xD34F]

Элементам .item добавить data-атрибуты, указывающие, выбор какого типа осуществляется с помощью кнопок внутри (only - выбран может быть только один вариант вообще, one - выбран может быть только один вариант внутри данного .item, multiple - можно выбирать произвольное количество вариантов внутри данного .item):

<div class="item" data-type="only">
  <h2>Выбрать все категории</h2>
  ...
</div>
<div class="item" data-type="one">
  <h2>Выбрать пол</h2>
  ...
</div>
<div class="item" data-type="multiple">
  <h2>Выбрать тип одежды</h2>
  ...
</div>

const containerSelector = '.filter';
const itemSelector = `${containerSelector} .item`;
const baseBtnSelector = 'button';
const btnSelector = `${itemSelector} ${baseBtnSelector}`;
const btnOnlySelector = `${itemSelector}[data-type="only"] ${baseBtnSelector}`;
const activeClass = 'active';

document.addEventListener('click', ({ target: t }) => {
  const button = t.closest(btnSelector);
  if (button) {
    const toggle = n => n.classList.toggle(activeClass, n === button);
    const item = button.closest(itemSelector);
    const { type } = item.dataset;

    item
      .closest(containerSelector)
      .querySelectorAll(type === 'only' ? btnSelector : btnOnlySelector)
      .forEach(toggle);

    if (type === 'multiple') {
      button.classList.toggle(activeClass);
    } else if (type === 'one') {
      item.querySelectorAll(btnSelector).forEach(toggle);
    }
  }
});

Comments

[Kipsi]

Большое спасибо. Очень выручили меня!