Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2021, 17:07
Новичок на форуме
Отправить личное сообщение для andamurobl Посмотреть профиль Найти все сообщения от andamurobl
 
Регистрация: 11.07.2017
Сообщений: 6

Помогите оптимизировать фильтр.
Добрый день. Подскажите...
Имеется 2 блока по 2 радио кнопки с названиями:
красные / синие
квадраты / круги
и список объектов с атрибутами: цвет, форма.
Задача: при включеных радио кнопках на экране остаются только выбранные.

Вопрос: Правильно ли действие - для каждой комбинации радиокнопок писать свой сценарий. (подозреваю что нет, т к при добавлении новых радиокнопок количество сценариев будут расти в геометрической прогрессии.) Можете ли посоветовать выход из ситуации?
Спасибо. Надеюсь описал понятно.

Пример задачи...

Последний раз редактировалось andamurobl, 18.10.2021 в 17:09.
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2021, 17:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

andamurobl,
id уникально!!! вместо radio лучше checkbox, по onchange собрать все checked dataset и отфильтровать блоки согласно этого массива.
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2021, 17:51
Новичок на форуме
Отправить личное сообщение для andamurobl Посмотреть профиль Найти все сообщения от andamurobl
 
Регистрация: 11.07.2017
Сообщений: 6

Сообщение от рони Посмотреть сообщение
andamurobl,
id уникально!!! вместо radio лучше checkbox, по onchange собрать все checked dataset и отфильтровать блоки согласно этого массива.
Итересует как раз вот эта часть "...и отфильтровать блоки согласно этого массива"

Это делается путем: если выбрано 1, 5, 8 - показывать блоки 1, 5, 8 ?
Или есть способ все автоматизировать так, чтобы при добавлении новых атрибутов скрипт не надо было заново переписывать?
Ответить с цитированием
  #4 (permalink)  
Старый 18.10.2021, 18:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от andamurobl
Или есть способ все автоматизировать
смотрите пост #2. написали одну функцию и добавляйте хоть сотню параметров ничего в js менять не придётся.
Ответить с цитированием
  #5 (permalink)  
Старый 18.10.2021, 19:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

фильтрация по 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите оптимизировать код Elizaveta99 (X)HTML/CSS 0 06.06.2020 09:28
Оптимизировать код. Помогите! Staurus Events/DOM/Window 6 24.10.2019 14:18
Помогите оптимизировать jquery-код Stay_Strong Общие вопросы Javascript 33 15.08.2016 23:31
помогите оптимизировать пожайлуста _axl Общие вопросы Javascript 3 06.04.2011 23:04
Помогите оптимизировать скрипт смены изображений с анимацией Khmelevsky Элементы интерфейса 5 06.03.2010 19:02