Хочу сделать фильтрацию по категориям, по отдельности работает как надо, но если совмещать разные категории, то высший приоритет будет у последней нажатой категории, как это исправить
<nav1>
<ul id="list1">
<li><span class="category-btn a" data-category="sanatoriums"></span>Санатории</li>
<li><span class="category-btn a" data-category="guest"></span>Гостевые дома</li>
<li><span class="category-btn a" data-category="hostels"></span>Хостелы</li>
</ul>
</nav1>
<li><span class="text2"><img src="caret.png" id="caret_b">Район</span>
<div class="line_list"></div>
<nav2>
<ul id="list2">
<li><span class="category-btn b" data-category="all"></span>Все</li>
<li><span class="category-btn b" data-category="sea"></span>У моря</li>
</ul>
</nav2>
</li>
<li><span class="text3"><img src="caret.png" id="caret_c">Категория объекта</span>
<div class="line_list"></div>
<nav3>
<ul id="list3">
<li><span class="category-btn c" data-category="three"></span>Трехзвездочные</li>
<li><span class="category-btn c" data-category="four"></span>Четырехзвездочные</li>
<li><span class="category-btn c" data-category="five"></span>Пятизвездочные</li>
</ul>
</nav3>
<div class="box hotels sea">
<div class="img_place"><img src="talka.png" width="351" height="200px">
<div class="name">ПРИМОРЬЕ</div>
<div class="place">1,21 км от центра</div>
<div class="container3">
<div class="Date_box">
<div class="logo_date"><img src="date.png"></div>
<div class="Date">с 04.07.23 (пт) <br>
по 07.07.23 (пн)</div>
</div>
<div class="Coin_box">
<div class="logo_coin"><img src="coin.png"></div>
<div class="coin">75 000 ₽</div>
<div class="nights">(3 ночи/2 гостя)</div>
</div>
</div>
</div>
</div>
<div class="box sanatoriums sea three ">
<div class="img_place"><img src="kavkaz.png" width="351" height="200px">
<div class="name">ПРИМОРЬЕ GRAND RESORT HOTEL</div>
<div class="place">1,21 км от центра</div>
<div class="container3">
<div class="Date_box">
<div class="logo_date"><img src="date.png"></div>
<div class="Date">с 04.07.23 (пт) <br>
по 07.07.23 (пн)</div>
</div>
<div class="Coin_box">
<div class="logo_coin"><img src="coin.png"></div>
<div class="coin">75 000 ₽</div>
<div class="nights">(3 ночи/2 гостя)</div>
</div>
</div>
</div>
</div>
.filter {
opacity: 1;
animation-name: a1;
animation-duration: 0s;
animation-fill-mode: forwards;
}
@keyframes a1 {
to {
opacity: 0;
display: none;
}
}
<script>
const filterBox1 = document.querySelectorAll('.box');
document.querySelector('nav1').addEventListener('click', event => {
if (event.target.tagName !== 'SPAN') return;
let filterClass = event.target.dataset.category;
filterBox1.forEach(elem => {
elem.classList.remove('filter');
if (!elem.classList.contains(filterClass) && filterClass !== 'all') {
elem.classList.add('filter');
}
});
});
</script>
<script>
const filterBox2 = document.querySelectorAll('.box');
document.querySelector('nav2').addEventListener('click', event => {
if (event.target.tagName !== 'SPAN') return;
let filterClass = event.target.dataset.category;
filterBox2.forEach(elem => {
elem.classList.remove('filter');
if (!elem.classList.contains(filterClass) && filterClass !== 'all') {
elem.classList.add('filter');
}
});
});
</script>
<script>
const filterBox3 = document.querySelectorAll('.box');
document.querySelector('nav2').addEventListener('click', event => {
if (event.target.tagName !== 'SPAN') return;
let filterClass = event.target.dataset.category;
filterBox3.forEach(elem => {
elem.classList.remove('filter');
if (!elem.classList.contains(filterClass) && filterClass !== 'all') {
elem.classList.add('filter');
}
});
});
</script>
