Помогите оптимизировать фильтр.
Добрый день. Подскажите...
Имеется 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, время: 16:46. |