Как установить только одно значение объекта как true, а rest false (переключаемая категория) - PullRequest
Новая
       73

Как установить только одно значение объекта как true, а rest false (переключаемая категория)

1 голос
/ 28 сентября 2019

Я хотел бы сделать переключаемую категорию, используя тег span.Всякий раз, когда я нажимаю на тег span, я хочу написать код, который изменяет значение кликаемого тега span на active: true, а остальные теги span изменяют на значение active: false.Но я не знаю, как .. :( Я написал функцию с именем toggleCategory, но, используя эту функцию, возможно только переключение. Поэтому, пожалуйста, помогите мне мастера кодирования .. (с vanilla JS)

Нажмите кнопку по умолчанию и значение 

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

Переключение активированной категории (это Промбелем) 

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

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

1 Ответ

0 голосов
/ 28 сентября 2019

Если вы хотите переключить класс все на других участках и установить активированный выбранный, вы можете сделать это, выбрав все теги, которые вы просматриваете, с помощью селектора css и назначьте событие click, а затем вставьте свою логикукак показано ниже ... 

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.
});
...