Показать сообщение отдельно
  #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>
Ответить с цитированием