Знаю, звучит толсто. Но это правда возможно. Почти. Предлагаемый мной способ вряд ли применим в крупных проектах, но в мелких, для себя, типа «сайтов про кота», вполне рабочее решение. Возможность сортировки нам предоставит flexbox и css-переменные (они же custom properties) и js тут не потребуется.
Для начала создадим простой список критериев сортировки, который можно видеть почти в каждом интернет-магазине – по умолчанию, по цене (возрастание/убывание), по алфавиту (возрастание/убывание):
<input id="q1" type="radio" name="sort" checked> <label for="q1">По умолчанию</label><br> <input id="q2" type="radio" name="sort"> <label for="q2">По цене, по возрастанию</label><br> <input id="q3" type="radio" name="sort"> <label for="q3">По цене, по убыванию</label><br> <input id="q4" type="radio" name="sort"> <label for="q4">По алфавиту, по возрастанию</label><br> <input id="q5" type="radio" name="sort"> <label for="q5">По алфавиту, по убыванию</label><br>
А так же сам сортируемый список. В этом списке каждый элемент имеет название товара (в данном случае «Первый», «Второй» и т.п. и цену товара).
<div class="wrapper"> <div class="item">Первый - 20000</div> <div class="item">Второй - 17550</div> <div class="item">Третий - 17549</div> <div class="item">Четвертый - 17549</div> <div class="item">Пятый - 17549</div> </div>
.wrapper { display: flex; flex-direction: column; }
Что означает отсортировать список? Это значит, нам нужно поменять взаимное расположение элементов в списке. Потомкам flex-блока можно задать свойство order для изменения порядка их следования в блоке. Если order не задан для элемента, его значение равно нулю. Элемент с большим значением order будет поставлен ближе к концу блока, элемент с меньшим – ближе к началу. Таким образом, нам нужно всего лишь добавить некие сведения о порядке расположения элементов списка в свойство order каждого элемента. В этом нам помогут css-переменные (inline-css тут для наглядности).
<div class="wrapper"> <div class="item" style="--default: 1; --cost: 20000; --title: 2;"> Первый - 20000 </div> <div class="item" style="--default: 2; --cost: 17550; --title: 1;"> Второй - 17550 </div> <div class="item" style="--default: 3; --cost: 17549; --title: 4;"> Третий - 17549 </div> <div class="item" style="--default: 4; --cost: 17549; --title: 5;"> Четвертый - 17549 </div> <div class="item" style="--default: 5; --cost: 17549; --title: 3;"> Пятый - 17549 </div> </div>
И подставив в order значение из css-переменной мы получим элементы расставленные в нужном порядке.
/* по умолчанию */ #q1:checked ~ .wrapper > .item { order: var(--default); } /* по цене */ #q2:checked ~ .wrapper > .item, #q3:checked ~ .wrapper > .item { order: var(--cost); } /* по алфавиту */ #q4:checked ~ .wrapper > .item, #q5:checked ~ .wrapper > .item { order: var(--title); }
Для сортировки по возрастанию/убыванию можно использовать свойство flex-direction:
#q3:checked ~ .wrapper, #q5:checked ~ .wrapper { flex-direction: column-reverse; }
К сожалению, сразу становится очевидна проблема «почти», о которой я упомянул в начале – порядок следования элементов, заданный в css-переменных должен быть определен заранее. И если с ценой это не представляет особой проблемы, можно просто указать значение в переменной --cost как есть, то с остальными сортировками, по умолчанию и по алфавиту, придется заранее раздать элементам индексы. К плюсам решения можно отнести то, что изменения в порядке сортировки применяются мгновенно.
→ Вот рабочий прототип
