如何删除所有其他元素上的类，除了被点击的元素

Question

您好，我想删除除单击元素之外的所有其他元素的类。

到目前为止，我的代码看起来像这样，但我找不到解决方案

const elements = document.querySelectorAll(".element");

function toggleOpen() {
    this.classList.toggle('open');
    elemets.forEach(ele => {
        ele.classList.remove('open'); // buts this removes the class from all 
       the elements I am looking for something that removes the class on just 
       the other one element containing the class except on the clicked one.
    }) 
}

elements.forEach(ele => ele.addEventListener('click', toggleOpen));

Answer 1

您真的很接近，只需在 forEach 循环中使用 if 子句通过与 this 比较来跳过您单击的元素，另外，您在函数中有错字：

const elements = document.querySelectorAll('.element');

function toggleOpen() {
    this.classList.toggle('open');
    elements.forEach(ele => {
        if (ele !== this) ele.classList.remove('open');
    });
}

elements.forEach(ele => ele.addEventListener('click', toggleOpen));

.element { color: red; }
.open { color: green; }

<button class="element">1</button>
<button class="element">2</button>
<button class="element">3</button>
<button class="element">4</button>