Как сделать такой фильтр, а потом объединить результат?
https://codepen.io/GunAlv/pen/OJMyVX...omK-UHi3e3xfyI
Суть в том, что у одного места может быть несколько видов топлива, они прописаны в data-type класса place. Примитивную фильтрацию по объектам (data-object) я реализовать могу, но сложность представляет data-type с его массивом топлива, а потом — объединение результатов обоих фильтров и отображение нужного места |
фильтрация по dataset
Lalviz,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.place-list {
display: flex;
flex-wrap: wrap;
margin-left: -40px;
margin-top: 40px;
}
.place {
border: 3px solid tomato;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 50px;
margin-left: 40px;
}
.place.hide {
border-color: hsla(0, 0%, 80%, 1);
opacity: .3;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
if (target = target.closest(selector)) handler(target)
})
const filter = elem => {
let items = Array.from(document.querySelectorAll(".place-list .place"));
items.forEach(elem => elem.classList.add("hide"));
let typeAll = document.querySelector("#type-all");
let type = Array.from(typeAll.parentNode.querySelectorAll("input")).filter(elem => elem !== typeAll);
if (elem == typeAll && elem.checked) {
type.forEach(elem => elem.checked = false)
}
if (type.includes(elem)) typeAll.checked = false;
type = type.filter(elem => elem.checked).map(({id}) => id);
if (type.length) {
items = items.filter(({dataset}) => type.every(id => dataset.type.includes(id)))
}
else typeAll.checked = true;
let objectsAll = document.querySelector("#objects-all");
let objects = Array.from(objectsAll.parentNode.querySelectorAll("input")).filter(elem => elem !== objectsAll);
if (elem == objectsAll && elem.checked) {
objects.forEach(elem => elem.checked = false)
}
if (objects.includes(elem)) objectsAll.checked = false;
objects = objects.filter(elem => elem.checked).map(({id}) => id);
if (objects.length) {
items = items.filter(({dataset}) => objects.some(id => dataset.object.includes(id)))
}
else objectsAll.checked = true;
items.forEach(elem => elem.classList.remove("hide"));
};
on(document.querySelector(".gas-filter"), "input", ".gas-filter__checkbox", filter);
});
</script>
</head>
<body>
<div class="gas-filter">
<div class="gas-filter__item">
<p class="gas-filter__item-label">
Вид топлива:
</p>
<div class="gas-filter__items">
<input data-gas-checkbox-type type="checkbox" class="gas-filter__checkbox visually-hidden" id="type-all" checked>
<label class="gas-filter__checkbox-label" for="type-all">Все</label>
<input data-gas-checkbox-type type="checkbox" class="gas-filter__checkbox visually-hidden" id="type-ai-92">
<label class="gas-filter__checkbox-label" for="type-ai-92">АИ 92</label>
<input data-gas-checkbox-type type="checkbox" class="gas-filter__checkbox visually-hidden" id="type-ai-95">
<label class="gas-filter__checkbox-label" for="type-ai-95">АИ 95</label>
<input data-gas-checkbox-type type="checkbox" class="gas-filter__checkbox visually-hidden" id="type-dt">
<label class="gas-filter__checkbox-label" for="type-dt">ДТ</label>
<input data-gas-checkbox-type type="checkbox" class="gas-filter__checkbox visually-hidden" id="type-kpg">
<label class="gas-filter__checkbox-label" for="type-kpg">КПГ</label>
<input data-gas-checkbox-type type="checkbox" class="gas-filter__checkbox visually-hidden" id="type-spg">
<label class="gas-filter__checkbox-label" for="type-spg">СПГ</label>
</div>
</div>
<div class="gas-filter__item">
<p class="gas-filter__item-label">
Объекты:
</p>
<div class="gas-filter__items">
<input data-gas-checkbox-object type="checkbox" class="gas-filter__checkbox visually-hidden" id="objects-all" checked>
<label class="gas-filter__checkbox-label" for="objects-all">Все</label>
<input data-gas-checkbox-object type="checkbox" class="gas-filter__checkbox visually-hidden" id="objects-agzs">
<label class="gas-filter__checkbox-label" for="objects-agzs">АГЗС</label>
<input data-gas-checkbox-object type="checkbox" class="gas-filter__checkbox visually-hidden" id="objects-mazk">
<label class="gas-filter__checkbox-label" for="objects-mazk">МАЗК</label>
<input data-gas-checkbox-object type="checkbox" class="gas-filter__checkbox visually-hidden" id="objects-gns">
<label class="gas-filter__checkbox-label" for="objects-gns">ГНС</label>
<input data-gas-checkbox-object type="checkbox" class="gas-filter__checkbox visually-hidden" id="objects-shop">
<label class="gas-filter__checkbox-label" for="objects-shop">Магазин</label>
</div>
</div>
</div>
<div class="place-list">
<div class="place" data-type="[type-ai-92, type-kpg ]" data-object="objects-shop" >Магазин</div>
<div class="place" data-type="[type-kpg]" data-object="objects-mazk">МАЗК</div>
<div class="place" data-type="[type-kpg, type-dt, type-ai-95, type-ai-92]" data-object="objects-agzs">АГЗС</div>
<div class="place" data-type="[type-kpg, type-ai-95, type-ai-92]" data-object="objects-gns">ГНС</div>
<div class="place" data-type="[type-dt, type-ai-95]" data-object="objects-gns">ГНС</div>
<div class="place" data-type="[type-ai-92, type-kpg, type-dt]" data-object="objects-shop">Магазин</div>
<div class="place" data-type="[type-dt, type-ai-92]" data-object="objects-agzs">АГЗС</div>
<div class="place" data-type="[type-kpg, type-dt, type-ai-95, type-ai-92]" data-object="objects-mazk">МАЗК
</div>
<div class="place" data-type="[type-dt]" data-object="objects-mazk">МАЗК</div>
<div class="place" data-type="[type-kpg, type-dt]" data-object="objects-shop">Магазин</div>
<div class="place" data-type="[type-spg]" data-object="objects-shop">Магазин</div>
</div>
</body>
</html>
|
Спасибо большое, рони!
|
| Часовой пояс GMT +3, время: 02:23. |