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

Question

[Владислав Линник]

Как сделать, чтобы класс переключался, но не в случае, когда активных элементов больше 5 (не работает, если выбрать макс. возможное кол-во активных)?
https://codepen.io/anon/pen/YgEVjW

Comments

[devilsD]

Уберите условие

if ( actLen < 5 ) {
            $(this).toggleClass("active");
        }

оставьте
$(this).toggleClass("active");

[Владислав Линник]

devilsD, Оно ведь не просто так стоит, это код пример, хочу узнать что в таком случае делать

[devilsD]

Владислав Линник, Если вам нужно сохранить ограничение в 5 активных элементов, то ниже уже дали пример. Если вам это ограничение не нужно, то просто уберите условие.

[Талян]

Владислав Линник,

хочу узнать что в таком случае делать

убрать условие. Я например ваш вопрос тоже не понял.

[Владислав Линник]

Анатолий, Да, плохо объяснил, но код ниже помог

Answer 1

[0xD34F]

const containerSelector = '.choose-buttons';
const buttonSelector = '.btn';
const activeClass = 'active';
const maxActive = 3;

$(containerSelector).on('click', buttonSelector, function(e) {
  const numActive = $(`${buttonSelector}.${activeClass}`, e.delegateTarget).length;
  const $this = $(this);

  if (numActive < maxActive || $this.hasClass(activeClass)) {
    $this.toggleClass(activeClass);
  }
});

// или

document.querySelectorAll(containerSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick(e) {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const active = [...this.querySelectorAll(`${buttonSelector}.${activeClass}`)];
    if (active.length < maxActive || active.includes(button)) {
      button.classList.toggle(activeClass);
    }
  }
}

Comments

[Владислав Линник]

Спасибо большое!

[Талян]

А что изменилось то? в упор не вижу. Или уже на codepen новый пересохранён код?

[0xD34F]

Анатолий,

Или уже на codepen новый пересохранён код?

Да.

Было:

$(".choose-buttons .btn").on('click', function(){
    var actLen = $('.choose-buttons .btn.active').length;
            
    if ( actLen < 5 ) {
        $(this).toggleClass("active");
    }

});