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

Question

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

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

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

Answer 1

[0xD34F]

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

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

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

let numActive = 0;

for (const n of document.querySelectorAll(itemSelector)) {
  n.addEventListener('click', onClick);
  numActive += n.matches(activeSelector);
}

function onClick() {
  if (numActive < maxActive || this.matches(activeSelector)) {
    numActive += this.classList.toggle(activeClass) ? 1 : -1;
  } else {
    onMaxActiveClick();
  }
}

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

document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(itemSelector)) {
    const { length } = document.querySelectorAll(activeSelector);
    if (length < maxActive || t.classList.contains(activeClass)) {
      t.classList.toggle(activeClass);
    } else {
      onMaxActiveClick();
    }
  }
});