Есть кнопки сортировки. По цене и по названию, в обоих случаях в двух направлениях. Задача, чтобы по умолчанию выводились две кнопки, а по нажатию на одной из них на ее месте появлялась кнопка обратной сортировки. Например, выводятся 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>
Простой