javascript - 从所有节点列表元素中删除样式并仅添加到单击的元素 Vanilla JS

Question

我有多个 div，单击时会添加边框并将它们稍微放大。我使用 foreach 循环遍历所有元素，然后单击时删除每个元素的边框和缩放属性，但单击的元素除外，我向其中添加边框和缩放。 我的代码是完全合乎逻辑的，应该可以工作，但由于某种原因我似乎无法理解，它只将样式应用于单击的元素，而不是从其余元素中删除(就像我的代码所说的那样)。

JS

    document.querySelectorAll('.projcolorpick div').forEach(el => {
            el.onclick = (e) => {
                el.style.border = "none"
                el.style.transform  = "scale(1)"
                e.target.style.border = "2px solid #fff"
                e.target.style.transform = "scale(1.2)" 
                projcolor = e.target.style.background   
            }
        }) 
     } 

Answer 1

尝试一下这样的事情...每个元素都需要一个 id 属性才能工作(过滤器部分 - 如果有一个唯一的属性...)

    const list = Array.from(document.querySelectorAll('.projcolorpick div'));
    list.forEach(el => {
            el.addEventListener('click', (e) => {
                //code that affects the element you click on
                el.style.border = "2px solid #fff"
                el.style.transform = "scale(1.2)" 
                projcolor = e.target.style.background;
                list.filter(x=>x.id!=el.id).forEach(otherEl=>{
                    //code that affects the other elements you didn't click on
                    otherEl.style.border = "none"
                    otherEl.style.transform  = "scale(1)"
                });
            });
        }); 
     
    ```
edit:
fixed some typos.