Блог

Главная - Вопросы по программированию - Как помешать моим спискам событий укладываться в класс тела?

Как помешать моим спискам событий укладываться в класс тела?

#javascript #html #toggle #addeventlistener

Вопрос:

Я написал код, который вместо включения светлого/темного режима включает режим весна/лето/осень/зима. Вот пример одного сезона:

 const springThemeOn = sessionStorage.getItem("springtheme")
if (springThemeOn==="true"){
    document.body.className = "spring-theme";
    spring.classList.add('hide-icon');
    summer.classList.remove('hide-icon');
    autumn.classList.remove('hide-icon');
    winter.classList.remove('hide-icon');
}

//spring change
springIcon.addEventListener('click', () => {
    document.body.classList.toggle('spring-theme');
    spring.classList.toggle('show-icon');
    summer.classList.toggle('show-icon');
    autumn.classList.toggle('show-icon');
    winter.classList.toggle('show-icon');
    // Store toggle info between pages
    if (document.body.className.includes("spring-theme")){
        // Currently in spring mode
        sessionStorage.setItem("spring-theme", "true")
    } else {
        // Currently in other mode
        sessionStorage.setItem("spring-theme", "false")
    }
})

Представьте себе это со всеми четырьмя временами года.
Код работает, но когда я нажимаю на каждый значок соответственно, каждый из них добавляет себя в класс тела следующим образом: <body class="b-page spring-theme summer-theme autumn-theme winter-theme"> и отображает только режим последнего нажатия.

Я хочу иметь возможность переключаться между всеми четырьмя значками и не нажимать на/выключать каждый значок, чтобы добавлять/удалять их из тела класса. Я не хочу, чтобы они складывались в тело класса. Есть ли решение для этого? Спасибо!

Ответ №1:

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

 const theme = sessionStorage.getItem("theme");
if (theme === 'spring') {
  // ...
} else if (theme === 'summer') {
  // ...
}
// etc

И в прослушивателе щелчков что-то вроде:

 if (document.body.className.includes("spring-theme")){
    sessionStorage.setItem('theme', ''); // remove any existing themes
} else {
    sessionStorage.setItem('theme', 'spring'); // add it
}

Таким образом, не будет никаких столкновений.

Комментарии:

1. Привет, я ценю ваш ответ! К сожалению, я попробовал ваш путь, но они все еще складываются/складываются вместе в классе тела 🙁 попробую несколько разных комбинаций и посмотрю, смогу ли я найти решение. В любом случае, спасибо тебе.

2. Когда тема изменится, установите для класса только новую тему — не пытайтесь сохранить старый класс. Например, сделайте document.body.className = newTheme , где newTheme то же значение, которое вы установили sessionStorage .

Метки: