Есть кнопка "Версия для слабовидящих", при нажатии на которую к параграфам, инпутам и т.п. добавляются классы, которые увеличивают их размер. Реализовано это через обработчик щелчка на jQuery.
Проблема в том, что когда при ВКЛЮЧЕННОМ режиме для слабовидящих нажимаешь на другую страницу навигации, она подгружается без режима для слабовидящих, то есть подгружается изначальная стандартная разметка без доп. классов.
Отсюда вопрос: Как изменить это поведение, чтобы режим для слабовидящих не исчезал ровно до того момента, как повторно не нажмешь кнопку для слабовидящих, а переход по страницам не менял это поведение?
-
2вы бы лучше к body добавляли класс, что исопользуется версия, и стили бы перекрыли для инпутов с этим родительским классом, а не просто ко всем полям добавляли. при клике в кнопку устаналиваете куки. на сервере класс к боди добавляйте по наличию куки. ну или в сессию или что там еще. Без сервер-сайта если делать, то при клике запоминайте это в storage. При открытии каждой страницы смотрите, и при неоходимости добавляйте ваши классы.– teran29 ноя 2020 в 11:48
-
Благодарю, буду пробовать– Dmitry_allread_return29 ноя 2020 в 13:55
Добавить комментарий
|
1 ответ
HTML
<body>
<div class="switcher_section">
<button class="normal">Нормальная версия сайта</button>
<button class="notseen">Для слабовидящих</button>
</div>
<div class="text_section">
<p>Lorem Inspum Dollar</p>
</div>
</body>
JQuery
jQuery(function ($) {
// Функция позваляет получать значения куки
function getCookie(name) {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
// Переключатели версий сайта
$('.switcher_section button').on('click', function (e) {
e.preventDefault();
if($(this).hasClass('normal')){
document.cookie = "what_version=normal";
$('body').removeClass('site-version-notseen');
} else {
document.cookie = "what_version=notseen";
$('body').removeClass('site-version-normal');
}
$('body').addClass('site-version-' + getCookie('what_version'));
})
// Это запускается после перезагрузки страницы
var what_version = getCookie('what_version');
if(typeof what_version != 'undefined'){
$('body').addClass('site-version-' + what_version);
}
});
Css
.site-version-notseen p{
font-size: 26px;
}