localStorage - несколько классов
Здравствуйте!
Есть простой переключатель тем (светлая/тёмная). https://codepen.io/mirandalwashburn/pen/wZmZLz Там в JS коде передаётся только один класс. Как добавить ещё несколько классов? Т.е. нужно стилизовать несколько классов. Так не получилось: localStorage.toggled != 'dark, another-dark' localStorage.toggled != 'dark' or 'another-dark' В этом кусочке: 'dark' if (localStorage.toggled != 'dark') { $('#main, p').toggleClass('dark', true); localStorage.toggled = "dark"; Продублирую тут весь код: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <main id="main"> <p> Click to toggle dark mode </p> <label class="switch"> <input type="checkbox" onclick="darkLight()" id="checkBox" > <span class="slider"></span> </label> </main> <style> body { margin: 0; padding: 0; } main { height: 100vh; width: 100vw; transition: background 0.3s ease; display: flex; flex-direction: column; justify-content: center; } main p { align-self: center; font-family: sans-serif; transition: color 0.3s ease; } /*TOGGLE COLORS*/ .dark { background: #545454; color: #efefef; } p { background: none !important; } /*SWITCH*/ .switch { position: relative; display: inline-block; width: 60px; height: 34px; align-self: center; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; } input:checked + .slider { background-color: #2196f3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider { border-radius: 30px; } .slider:before { border-radius: 50%; } </style> <script> $('#main').toggleClass(localStorage.toggled); function darkLight() { /*DARK CLASS*/ if (localStorage.toggled != 'dark') { $('#main, p').toggleClass('dark', true); localStorage.toggled = "dark"; } else { $('#main, p').toggleClass('dark', false); localStorage.toggled = ""; } } /*Add 'checked' property to input if background == dark*/ if ($('main').hasClass('dark')) { $( '#checkBox' ).prop( "checked", true ) } else { $( '#checkBox' ).prop( "checked", false ) } </script> |
Цитата:
Т.ч. стоит придумать какой-то другой "семафор" или изменить хранение данных в localStorage. |
Например проверять не на равенство/не _равенство, а на вхождение.
Тогда хранить можно весь набор классов localStorage.toggled != 'dark another-dark' |
ksa,
вопрос пока не решился. localStorage.toggled != 'dark another-dark' - здесь мне нужно перечислить классы, которые будут сохраняться при перезагрузке страницы, при переходе по ссылкам. Сейчас сохраняется только класс dark. Остальные сбрасываются. Я думал, что классы перечисляются через запятую или через оператор OR. Вы написали просто через пробел, но это тоже не сработало. |
|
Цитата:
У элемента они указываются именно через пробел. <p class='cls1 cls2 cls3'>...</p> Цитата:
|
Часовой пояс GMT +3, время: 11:07. |