如何仅将对象的一个值设置为真，其余为假（可切换类别）答案

【问题标题】：How to set only one value of object as true and rest false (switchable category)如何仅将对象的一个值设置为真，其余为假（可切换类别）
【发布时间】：2019-09-28 05:00:08
【问题描述】：

我想使用 span 标签制作一个可切换的类别。每当我单击跨度标记时，我都想编写将单击的跨度标记的值更改为active: true 并将其余跨度标记更改为值active: false 的代码。但我不知道如何.. :( 我写了一个名为toggleCategory 的函数，但是使用这个函数，只能切换。所以请帮助我编码大师..（使用香草JS）

推送默认键和值

document.querySelector('#category').addEventListener('submit', () => {
    categories.push({
        id: uuidv4(),
        active: false 
    })
})

切换已激活的类别（这是 Prombelem）

const toggleCategory = (id) => {
    const category = categories.find((category) => category.id === id)

    if (category) {
        category.active = !category.active
    }
}

【问题讨论】：

标签： javascript object switch-statement push categories

【解决方案1】：

如果您想在其他跨度上切换所有类并将单击的类设置为活动状态，您可以通过使用 CSS 选择器选择您正在查看的所有标签并分配一个点击事件然后插入您的逻辑来做到这一点像下面...

document.querySelectorAll('span').addEventListener('click', () => {
    document.querySelectorAll('span').forEach( (e) => { //Gets all spans on page and loop throught them removing the active class.
        e.classList.remove('active');
    });
    this.classList.add('active'); //Get clicked span (That toggled the event) and adds the active class.
});

【讨论】：