这个 vanilla JavaScript 颜色过滤器有什么问题？答案

【问题标题】：What is wrong with this vanilla JavaScript colors filter?这个 vanilla JavaScript 颜色过滤器有什么问题？
【发布时间】：2021-11-01 03:26:46
【问题描述】：

我有很多不同的彩虹色div，列表中有 8 个项目。 7 个带有颜色名称和“全部”选项的部分。代码过滤颜色。

从'all'部分移动到其他部分或相反时会出现问题，容器向右移动，但在颜色部分之间移动时没有问题

let myList   = document.querySelectorAll('ul li');
let myColors = document.querySelectorAll('.colors div');

myList.forEach(item => {
  item.onclick = function() {
    myColors.forEach(color => {
      color.style.display = 'none'
    })
    let theTarget = this.dataset.target;
    myColors.forEach(color => {
      if (theTarget === color.dataset.color || theTarget === 'all') {
        color.style.display = 'block'
      }
    })
  }
});

<div class="container">
  <ul>
    <li data-target="all">All</li>
    <li data-target="red">Red</li>
    <li data-target="orange">Orange</li>
    <li data-target="yellow">Yellow</li>
    <li data-target="green">Green</li>
    <li data-target="blue">Blue</li>
    <li data-target="indigo">Indigo</li>
    <li data-target="violet">Violet</li>
  </ul>
  <div class="colors">
    <div style="background: #f00" data-color="red">red</div>
    <div style="background: #4b0082" data-color="indigo">indigo</div>
    <div style="background: #00800d" data-color="green">green</div>
    <div style="background: #ffa500" data-color="orange">orange</div>
    <div style="background: #ee82ee" data-color="violet">violet</div>
    <!-- ... -->
  </div>
</div>

【问题讨论】：

我编辑了您的 sn-p，因为 .colors 中的 div 元素没有内容，因此没有显示。另请注意， sn-p 不显示您描述的行为。这很可能是您页面中其他地方的一些 CSS 引起的问题。请编辑以包含所有代码以重新创建问题

标签： javascript html jquery angularjs

【解决方案1】：

你有不必要的复杂事情

const allColors   = document.querySelectorAll('.colors div')

document.querySelector('div.container').onclick = ({target}) =>
  {
  if (!target.matches('li') ) return

  let choosed = target.dataset.target
    , isAll   = choosed === 'all'
    ;
  allColors.forEach(el => el.classList.toggle('noDisplay', !(isAll || el.dataset.color===choosed)) )
  }

div.container li {
  cursor : pointer;
  }
.noDisplay {
  display : none;
  }

<div class="container">
  <ul>
    <li data-target="all"    > All    </li>
    <li data-target="red"    > Red   </li>
    <li data-target="orange" > Orange </li>
    <li data-target="yellow" > Yellow </li>
    <li data-target="green"  > Green  </li>
    <li data-target="blue"   > Blue   </li>
    <li data-target="indigo" > Indigo </li>
    <li data-target="violet" > Violet </li>
  </ul>
  <div class="colors">
    <div style="background: #f00"    data-color="red"   >&nbsp;</div>
    <div style="background: #4b0082" data-color="indigo">&nbsp;</div>
    <div style="background: #00800d" data-color="green" >&nbsp;</div>
    <div style="background: #ffa500" data-color="orange">&nbsp;</div>
    <div style="background: #ee82ee" data-color="violet">&nbsp;</div>
    <div style="background: #f00"    data-color="red"   >&nbsp;</div>
<!--    ... -->
  </div>
</div>

【讨论】：