Доброго времени суток. У меня есть задача сделать фильтрацию новостей по тегам
Вот как я это реализовал:
<!-- 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';
})
}
})
})
Но дело в том, что я не могу придумать, как сделать так, что бы например выбиралось три тега, и выводились статьи, у которых эти теги присутствуют. Помогите пж
Простой
