Помогите оптимизировать фильтр.
Добрый день. Подскажите...
Имеется 2 блока по 2 радио кнопки с названиями: красные / синие квадраты / круги и список объектов с атрибутами: цвет, форма. Задача: при включеных радио кнопках на экране остаются только выбранные. Вопрос: Правильно ли действие - для каждой комбинации радиокнопок писать свой сценарий. (подозреваю что нет, т к при добавлении новых радиокнопок количество сценариев будут расти в геометрической прогрессии.) Можете ли посоветовать выход из ситуации? Спасибо. Надеюсь описал понятно. Пример задачи... |
andamurobl,
id уникально!!! вместо radio лучше checkbox, по onchange собрать все checked dataset и отфильтровать блоки согласно этого массива. |
Цитата:
Это делается путем: если выбрано 1, 5, 8 - показывать блоки 1, 5, 8 ? Или есть способ все автоматизировать так, чтобы при добавлении новых атрибутов скрипт не надо было заново переписывать? |
Цитата:
|
фильтрация по dataset
andamurobl,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 100px;
font-family: sans-serif;
color: #fff;
background: #2f2f2f;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
input,
label {
cursor: pointer;
}
label:nth-child(4) {
margin-right: 50px;
}
div.target_item {
width: 100px;
height: 100px;
display: inline-block;
margin-top: 100px;
opacity: 1;
transition: all .3s ease;
margin-right: 10px;
border: 2px solid #fff;
}
div[data-form="round"] {
border-radius: 50px;
}
div[data-color="red"] {
background: rgb(175, 57, 57);
}
div[data-color="blue"] {
background: rgb(53, 131, 194);
}
#refresh {
margin-top: 100px;
border-radius: 50%;
cursor: pointer;
text-decoration: underline;
}
.hided {
opacity: 0 !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const switchers = document.querySelector(".switchers");
const category = Array.from(switchers.querySelectorAll("[data-type]"))
const blocks = document.querySelectorAll(".blocks .target_item");
document.querySelector(".switchers").addEventListener("change", function(event) {
let data = category.map(el => {
const type = el.dataset.type;
const options = [...el.querySelectorAll(":checked")].map(({
dataset
}) => dataset[type])
return {
type,
options
}
});
blocks.forEach(elem => {
const hide = !data.every(({
type,
options
}) =>
!options.length || options.includes(elem.dataset[type])
);
elem.classList.toggle("hided", hide)
})
});
});
</script>
</head>
<body>
<div class="switchers">
<div data-type="color">
<label><input type="checkbox" data-color="red">Reds</label>
<label><input type="checkbox" data-color="blue">Blues</label>
</div>
<div data-type="form">
<label><input type="checkbox" data-form="rect">Rects</label>
<label><input type="checkbox" data-form="round">Rounds</label>
</div>
</div>
<div class="blocks">
<div class="target_item" data-color="red" data-form="rect"></div>
<div class="target_item" data-color="blue" data-form="rect"></div>
<div class="target_item" data-color="red" data-form="round"></div>
<div class="target_item" data-color="blue" data-form="round"></div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 15:08. |