JavaScript Vanilla | Hide/Show Элементов при клике на кнопку

Question

В общем, у меня есть 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 - После

Answer 1

Для начала рекомендую немного поиграть с версткой. Задать один общий класс всем кнопкам, так же для самих "вкладок" то есть блокам карт. Будем определять переменные по селектору класса. Так же добавьте пару классов в CSS, они послужат для показа и скрытие. Функция очень проста и банальна, при желании можно поменять под себя.

CSS

.show {
display: block;
}

.hide {
display: none;
}

JS

const items = document.querySelectorAll('.filtered');
const itemBtns = document.querySelectorAll('.filter_btns');

// Получаем все кнопки и блоки со страницы в виде псевдомассива.

function hideItems() {
  // Функция по скрытию всех элементов. Перебираем все элементы и скрываем их.
  items.forEach((item) => {
    item.classList.remove('show');
    item.classList.add('hide');
  });
}

function showAllItems() {
  // Функция по показу всех элементов. Перебираем все элементы и показываем их.

  items.forEach((item) => {
    item.classList.remove('hide');
    item.classList.add('show');
  });
}

function showItems(i) {
  /**
   * Функция по показу всех элементов.
   * Вызывает в себе функцию по скрытию всех элементов.
   * Но показывает один текущий.
   */

  hideItems();
  itemBtns.forEach((btn) => {
    btn.classList.remove('active-btn');
  });

  items[i].classList.remove('hide');
  items[i].classList.add('show');

  // Добавляем класс активности к текущей кнопке.
  itemBtns[i].classList.add('active-btn');
}

itemBtns.forEach((btn, i) => {
  // Перебираем все кнопки, вешаем слушатель события.

  btn.addEventListener('click', () => {
    /**
     * Условие: Если кнопка на которую мы нажали, уже активна. Возвращаем всё как было.
     * И удаляем класс активности с кнопки.
     */

    if (btn.classList.contains('active-btn')) {
      itemBtns[i].classList.remove('active-btn');
      showAllItems();
    } else {
      // В противном случае скрываем все элементы. И показываем нужный текущий элемент.
      showItems(i);
    }
  });
});

БЛОГ НА HUSL

JavaScript Vanilla | Hide/Show Элементов при клике на кнопку

Ответы (1 шт):