这个香草JavaScript颜色过滤器有什么问题?

Question

我有很多不同的彩虹色div和8个项目的列表。7个部分的颜色名称和一个'all'选项。代码过滤颜色。

当从'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>

Answer 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>