jQuery / Javascript - Ограничение ввода пользователя определенным количеством элементов?

Question

Я пытаюсь ограничить количество элементов, которые пользователь может выбрать, до 4.

Все элементы - это изображения / ссылки, когда пользователь нажимает на изображение, он переключает выбранный класс и добавляет элемент в массив выбранных значений элемента. Если пользователь нажимает на 5-й элемент, он должен удалить самый старый элемент из списка. Пользователь не должен иметь возможность выбирать один и тот же элемент несколько раз (заполнение списка одним и тем же элементом 4 раза).

Я считаю, что это последняя часть, которая нарушает мой код (пользователь может продолжать нажимать на один и тот же элемент и массив будет заполнен одним и тем же выделением 4 раза.

  var selectList = [];
  $('.selectable').on('click', function () {
     $(this).toggleClass('selected');
     if ($(this).hasClass('selected')) { 
         selectList.push(this.dataset.fn);
        } else { 
         var index = selectList.indexOf(this.dataset.fn);
         if (index > -1) {selectList.splice(index, 1);}
        }
    if (selectList.length > 4) {
     $('a[data-fn=' + selectList[0] + ']').removeClass('selected');
      selectList.shift();
    }
 });

Это ломается, если я продолжаю выбирать одно и то же изображение ... Должно быть проще!

Answer 1

html

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>

js

const list = [];
const maxLen = 4

document.querySelectorAll('.item').forEach(el => {
  const klass = 'selected';
  el.addEventListener('click', e => {
    const classes = el.classList;
    classes.toggle(klass);

    if (!classes.contains(klass)) {
      // item is unselected

      // remove item
      list.splice(list.indexOf(el), 1);      
    } else {
      if (list.length >= maxLen) {
        // remove oldest item
        const removed = list.shift();
        removed.classList.remove(klass);
      }

      // add new item
      list.push(el)
    }
  })
})