jQueryJavascript

jQuery / Javascript

我正在尝试将用户可以选择的项目数限制为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();
    }
 });

如果我继续选择相同的图像，这会中断...必须是更简单的方法！

回答如下：

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)
    }
  })
})

jQuery / Javascript

我正在尝试将用户可以选择的项目数限制为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();
    }
 });

如果我继续选择相同的图像，这会中断...必须是更简单的方法！

回答如下：

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)
    }
  })
})