Форум

andamurobl · #1 (**permalink**) 18.10.2021, 17:07

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

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

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

рони · #2 (**permalink**) 18.10.2021, 17:24

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

andamurobl · #3 (**permalink**) 18.10.2021, 17:51

Сообщение от рони

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

Итересует как раз вот эта часть "...и отфильтровать блоки согласно этого массива"

Это делается путем: если выбрано 1, 5, 8 - показывать блоки 1, 5, 8 ?
Или есть способ все автоматизировать так, чтобы при добавлении новых атрибутов скрипт не надо было заново переписывать?

рони · #4 (**permalink**) 18.10.2021, 18:39

Сообщение от andamurobl

Или есть способ все автоматизировать

смотрите пост #2. написали одну функцию и добавляйте хоть сотню параметров ничего в js менять не придётся.

рони · #5 (**permalink**) 18.10.2021, 19:36

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>

Форум

Справочник

Discord чат

Курсы javascript