garinov
@garinov
Фрилансер

Куки и состояние кнопок: как улучшить этот код?

Есть кнопки сортировки. По цене и по названию, в обоих случаях в двух направлениях. Задача, чтобы по умолчанию выводились две кнопки, а по нажатию на одной из них на ее месте появлялась кнопка обратной сортировки. Например, выводятся 2 кнопки сортировки по убыванию, и при нажатии на одну на ее месте появляется кнопка сортировки по возрастанию.

Сделал это через куки. Сначала по нажатию на кнопку запускается js скрипт, который скрывает селектор по ИД и устанавливает куку. В коде php через if else переменным присваивается значение "none", которое передается в кнопку следующим образом: в style="display:<? echo $style1 ?>".

Засада в том, что вместо 2х кнопок выводит три. Жмакаешь по цена: рядом появляются 2 кнопки "По названию", жмакаешь по "По названию" - появляются 2 с Ценой.

Что еще изменить - запарился уже.

function hideshow(x, y) {
	document.getElementById(x).style.display = "none";
	document.getElementById(y).style.display = "";
	document.cookie = "hide="+ x;
	document.cookie = "show="+ y; 
}



<? 
if ($_COOKIE['hide'] == 'a') {
    $style1 = "none";
} elseif ($_COOKIE['hide'] == 'b') {
    $style2 = "none";
} elseif ($_COOKIE['hide'] == 'c') {
    $style3 = "none";
} elseif ($_COOKIE['hide'] == 'd') {
    $style4 = "none";
}
?>

            <span style="display:<? echo $style1 ?>" id="a" rel="name"             class="sort-by asc"  onclick="return hideshow('a', 'b')">По названию <i class="fa fa-long-arrow-up"></i></span>
            <span style="display:<? echo $style2 ?>" style="display:none" id="b" rel="name"             class="sort-by desc" onclick="return hideshow('b', 'a')">По названию <i class="fa fa-long-arrow-down"></i></span>
            <span style="display:<? echo $style3 ?>" id="c" rel="catalog_price_15" class="sort-by asc"  onclick="return hideshow('c', 'd')">По цене<i class="fa fa-long-arrow-up"></i></span>
            <span style="display:<? echo $style4 ?>" style="display:none" id="d" rel="catalog_price_15" class="sort-by desc" onclick="return hideshow('d', 'c')">По цене<i class="fa fa-long-arrow-down"></i></span>
  • Вопрос задан
  • 203 просмотра
Решения вопроса 1
- PHP тут лишний
- вместо кук, тут уместен LocalStorage
- почему? С ним банально проще работать, и он сам по себе не "сгорит"

Есть пара вариантов как это решить:
1. Простой - хранить в LS текущий HTML со всеми кнопками как есть, обновлять в конце функции hideshow, при старте страницы заменять кнопки на то что в LS, либо не делать ничего если их там нет

2. Сложный - завести некую модель с массивом кнопок, хранить ее в сериализованном виде в LS, обновлять ее при клике, обрабатывать кнопки согласно модели при старте страницы
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы