При создании двух представлений, то есть сетки и просмотра, я также включаю кнопку, чтобы переключиться с одного на другой. Проблема в том, что когда вы переходите на новую страницу/обновляете страницу, дисплей возвращается в начальный режим, а не на выбранное представление. Следующий сценарий хочет решить эту проблему.
Цель
Создает параметры просмотра, которые сохраняются и проверяются каждый раз, когда открывается новая страница, и сразу же активирует кнопку просмотра в соответствии с сохраненными параметрами просмотра
Пререквийр
- Начальные классы;
D-None - JQuery; Выбор, на щелчке
- JavaScript;
LocalStorage,функция
Сценарий
function createItem(typeView) {
localStorage.myview = typeView;
}
function switchView(options){
$('#view-option .button-view').addClass('off-view');
if (options == 'grid'){
$('#book-view-list').addClass('d-none');
$('#book-view-grid').removeClass('d-none');
$('#view-option .button-view[view="grid"]').removeClass('off-view');
} else {
$('#book-view-grid').addClass('d-none');
$('#book-view-list').removeClass('d-none');
$('#view-option .button-view[view="list"]').removeClass('off-view');
}
}
$('#view-option .button-view').on('click', function() {
var option = $(this).attr('view');
createItem(option);
switchView(option);
});
// Crosscheck parameter page begin here!
let myView = localStorage.getItem("myview");
if (myView != null){
switchView(myView);
}
Принцип этого сценария
Функция сценария состоит из двух, а именно CreateItem Функция для хранения параметров просмотра, кроме того, что существует SwitchView Функция, которая является параметром для изменения представления с помощью Если логика Скрипт, который действует, чтобы изменить представление CSS, чтобы показать/скрыть представление сетки/списка.
Активный скрипт требует активного триггера щелчка, который выполняет CreateItem и SwitchView функции; Следует отметить, что в разделе HTML -кнопке был предоставлен параметр view = grid или view = список , Таким образом, взяв один из этих параметров, которые будут сохранены и переданы в переключатель View.
Последний сценарий для проверки параметров, которые были сохранены, и запустить переключатель на основе параметров.
Оригинал: “https://dev.to/andysaktia/last-buttom-view-choice-grid-or-line-not-change-when-refresh-change-page-2mb9”