Как лучше реализовать выбор не более скольких-то элементов из списка по клику?

Question

[Сергей Шилов]

Есть список элементов, по клику на которые дается класс, и надо запретить кликабельность элементов, если количество кликнутых превысило какое-то число.

Через что проще реализовать такую функцию?

Answer 1

[0xD34F]

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

const itemSelector = '.item';
const activeClass = 'active';
const maxActive = 3;
const onMaxActiveClick = () => alert(`больше ${maxActive} нельзя`);

Слушать клики можно непосредственно на элементах:

let activeCount = 0;

for (const n of document.querySelectorAll(itemSelector)) {
  n.addEventListener('click', onClick);
  activeCount += n.classList.contains(activeClass);
}

function onClick({ currentTarget: item }) {
  if (activeCount < maxActive || item.classList.contains(activeClass)) {
    activeCount += item.classList.toggle(activeClass) ? 1 : -1;
  } else {
    onMaxActiveClick();
  }
}

Или на каком-нибудь их общем предке:

document.addEventListener('click', function(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    const active = document.querySelectorAll(`${itemSelector}.${activeClass}`);
    if (active.length < maxActive || item.classList.contains(activeClass)) {
      item.classList.toggle(activeClass);
    } else {
      onMaxActiveClick();
    }
  }
});