Как сделать фильтрацию по облаку тегов?

Question

[smurzak3]

Доброго времени суток. У меня есть задача сделать фильтрацию новостей по тегам

Вот как я это реализовал:

<!-- tags -->
    <div class="blog-filter">
        <div class="container">
            <div class="blog-filter-inner">
                <ul class="blog-filter-list">
                    <li data-tag="run" class=""><a href="#" class="blog-filter-link">Бег</a></li>
                    <li data-tag="bikesport"><a href="#" class="blog-filter-link">Велоспорт</a></li>
                    <li class=""><a href="#" class="blog-filter-link">Диетологи</a></li>
                    <li data-tag="interview" class=""><a href="#" class="blog-filter-link">Интервью</a></li>
                    <li><a href="#" class="blog-filter-link">Силовые виды спорта</a></li>
                    <li><a href="#" class="blog-filter-link">Психология</a></li>
                    <li><a href="#" class="blog-filter-link">Разное</a></li>
                    <li><a href="#" class="blog-filter-link">Медицина</a></li>
                    <li><a href="#" class="blog-filter-link">Плавание</a></li>
                    <li><a href="#" class="blog-filter-link">Нутрициология</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!------- tags -->

    <!-- news -->

    <div class="news-wrapper">
        <div class="container">
            <div class="news-items">
                <!-- item -->
                <article class="interview news-item">
                    <div class="news-item-img">
                        <a href="#"><img src="img/blog-item-1.jpg" alt=""></a>
                    </div>
                    <div class="news-item-text">
                        <div class="news-item-title"><a href="#"><h4>Интервью с врачом аллергологом-иммунологом Майей Меньшиковой</h4></a></div>
                        <div class="news-item-descr">
                            <p>Сегодня у нас в гостях — Майя Меньшикова — член российской Ассоциации Аллергологов и Иммунологов (РААКИ), член Европейской Ассоциации Аллергологов и Иммунологов (EAACI). В рамках проекта Биотропика будем говорить о спорте, здоровье, иммунитете, аллергиях и образе жизни.</p>
                        </div>
                        <div class="news-item-tag">
                            <a href="#">#интервью</a>
                        </div>
                        <div class="news-item-info">
                            <div class="news-item-info-item">
                                <img src="img/time-icon.svg" alt="">
                                <p>7 мин.</p>
                            </div>
                            <div class="news-item-info-item">
                                <img src="img/like-icon.svg" alt="">
                                <p>13</p>
                            </div>
                            <div class="news-item-info-item">
                                <img src="img/eye-icon.svg" alt="">
                                <p>1233</p>
                            </div>
                            <div class="news-item-info-item">
                                <img src="img/calendar-icon.svg" alt="">
                                <p>01.12.2020</p>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- item -->
                <article class="news-item">
                    <div class="news-item-img">
                        <a href="#"><img src="img/blog-item-2.jpg" alt=""></a>
                    </div>
                    <div class="news-item-text">
                        <div class="news-item-title"><a href="#"><h4>Интервью с доктором медицинских наук. Александр Александрович Гайдаш.</h4></a></div>
                        <div class="news-item-descr">
                            <p>Сегодня у нас в гостях Александр Александрович Гайдаш — доктор медицинских наук. В рамках проекта Биотропика мы будем говорить о спорте, здоровье, химических и физиологических процессах внутри нашего организма.</p>
                        </div>
                        <div class="news-item-tag">
                            <a href="#">#интервью</a>
                        </div>
                        <div class="news-item-info">
                            <div class="news-item-info-item">
                                <img src="img/time-icon.svg" alt="">
                                <p>5 мин.</p>
                            </div>
                            <div class="news-item-info-item">
                                <img src="img/like-icon.svg" alt="">
                                <p>23</p>
                            </div>
                            <div class="news-item-info-item">
                                <img src="img/eye-icon.svg" alt="">
                                <p>123</p>
                            </div>
                            <div class="news-item-info-item">
                                <img src="img/calendar-icon.svg" alt="">
                                <p>01.12.2020</p>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- item -->
                <article class="run bikesport news-item">
                  Тут контент
                 </article>
                <!-- item -->
                <article class="bikesport news-item">
                    Тут контент
                </article>
                <!-- item -->
                <article class="news-item">
                    Тут контент
                </article>
                <!-- item -->
                <article class="news-item">
                   Тут контект
                </article>
            </div>
        </div>
    </div>
    <!------- news -->

JS:

// Получение родителя тегов
let filterlist = document.querySelector('.blog-filter-list');
// Получение каждого тега, т.е li элемент
let filterItem = filterlist.childNodes;
// Получение всех статей
let newsItem = document.querySelectorAll('.news-item');
// Получение обёртки статей
let newsWrapper = document.querySelector('.news-items');
filterItem.forEach((event)=>{
    event.addEventListener('click', ()=>{
        event.classList.toggle('active');
        if(event.classList.contains('active')){
            // Получение атрибута data tag у li списка
            let itemAttr = event.getAttribute('data-tag');
            // Поиск статей с таким же классом
            let resultItem = document.querySelectorAll(`.${itemAttr}`)
            resultItem.forEach((elem)=>{
                newsItem.forEach((e)=>{
                    // Скрываем все статьи
                    e.style.display = 'none';
                    // Нужную статью показываем
                    elem.style.display = 'block';
                })
            })
        } else{
            newsItem.forEach((e)=>{
                // Убираем все статьи
                e.style.display = 'none';
            })
        }
       
    })
})

Но дело в том, что я не могу придумать, как сделать так, что бы например выбиралось три тега, и выводились статьи, у которых эти теги присутствуют. Помогите пж

Answer 1

[Алексей Дубровин]

Будет абстрактное решение тк как я не хочу разбираться в 4+ вложенностях.

let tag; // Суда мы помещаем теги в виде массива [news,goods,books]
let allNews; //масив с нашими элементами

allNews.forEach(function(item){
    let itemTag = item.dataset.tag; // Получаем тег элемента
    if(tag.indexOf(itemTag) == -1){
        item.style.display = "none";
        return;
    }
    item.style.display = "block";
})

Тк же рекомендую не напрямую изменять
А если не активен то добавлять класс который будет делать красивое исчезновение элементов.
Типо баче)