В общем, у меня есть 5 кнопок.
- Мечи
- Жезлы
- Кубки
- Пентакли
- Старшие
Я хочу, чтобы при клике на кнопку "Мечи", показывались только карты из блока "Мечи", при повторном клике или клике на другой элемент -> показывались другие карты и скрывались остальные.
Что я реализовал:
function filter() {
var swords = document.getElementById('swords');
var woods = document.getElementById('woods');
var cups = document.getElementById('cups');
var penta = document.getElementById('penta');
var grant = document.getElementById('grant');
var swords_displayed = getComputedStyle(swords).display;
var woods_displayed = getComputedStyle(woods).display;
var cups_displayed = getComputedStyle(cups).display;
var penta_displayed = getComputedStyle(penta).display;
var grant_displayed = getComputedStyle(grant).display;
if (swords_displayed == 'flex') {
woods.style.display = 'none';
cups.style.display = 'none';
penta.style.display = 'none';
grant.style.display = 'none';
swords.className+=' filtered';
if (swords.className = 'filtered') {
woods.style.display = 'flex';
cups.style.display = 'flex';
penta.style.display = 'flex';
grant.style.display = 'flex';
swords.className-= ' filtered';
}
} else {
woods.style.display = 'flex';
cups.style.display = 'flex';
penta.style.display = 'flex';
grant.style.display = 'flex';
}
}
Но, я понимаю, что на этом далеко не уехать, понимаю, что ошибка где-то в логики if/else. Но т.к. я с js знаком от силы "прочитал пару статей".
Сам блок кнопки выглядит вот так
<div class="d-flex col justify-content-center">
<button id="filter_btns" class="d-flex card h-100 p-0 text-center" style="width: 9rem;">
<img src="{% static 'res/cards_images/woods.jpg' %}" class="card-img-top" alt="{{ desk.name }} таро">
<div class="card-body text-center">
<p class="card-text">Жезлы</p>
</div>
</button>
</div>
Два скриншота как это должно выглядеть:
https://ibb.co/dJ8qt5r - До https://ibb.co/8XddS5Z - После