Как получить такой функционал?

Question

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

const servicesList = document.querySelector('.services__сategory');
const activeClass = "active-category";
servicesList.addEventListener("click", function(event) {
    const element = event.target.closest(".category-item");
    if (!element) return;
    const activeElement = element.parentElement.querySelector(".active-category");
    activeElement?.classList?.remove(activeClass);
    element.classList.add(activeClass);
});

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

 // 1
    let servicesSubcategory = [...document.querySelectorAll("#services__subcategory > div")];
     document.querySelector("#services__сategory").addEventListener("click", e => {
        const index = [...e.target.parentElement.children].indexOf(e.target);
        servicesSubcategory.map((item, key) => key === index ? item.classList.remove("hide") : item.classList.add("hide"))
    });
    // 2
    let servicesDevelop = [...document.querySelectorAll("#services__items-develop > div")];
    
        document.querySelector("#subcategory__develop").addEventListener("click", e => {
        const index = [...e.target.parentElement.children].indexOf(e.target);
        servicesDevelop.map((item, key) => key === index ? item.classList.remove("hide") : item.classList.add("hide"))
    });

Вот мой пример того как пытался решить, под пунктом 1 показывание категорий второго уровня, под пунктом два, пример того, как пытался сделать вывод соответствующей карточки, но выходит так, что при смене категории, предыдущая карточка остаётся и в итоге они становятся друг на друга, вот почему мой вариант не подходит :(

Answer 1

Можно это сделать с помощью атрибута data

const services = document.getElementById('services');
const products = document.getElementById('products');
const card = document.getElementById('card');

function hideBlockItems(block) {
  for (let i=0, child; child = block.children[i]; i++) {
    child.classList.remove('active')
  }
}

function showBlockItems(block, prefix, key) {
  const items = block.querySelectorAll(`div[data-${prefix}="${key}"]`);
  
  for (let i=0, child; child = items[i]; i++) {
    child.classList.add('active')
  }
}

services.addEventListener('click', (event) => {
  hideBlockItems(products);
  hideBlockItems(card);
  showBlockItems(products, 'cat', event.target.dataset.cat)
});

products.addEventListener('click', (event) => {
  hideBlockItems(card);
  showBlockItems(card, 'prod', event.target.dataset.prod)
});

.container {
  display: flex;
}

.block {
  width: 30%;
}

.block div {
  padding: 5px;
  border: 1px solid;
  cursor: pointer;
}

#products div,
#card div {
  display: none;
}

#products div.active,
#card div.active {
  display: block;
}

<div class="container">
<div id="services" class="block">
  <div data-cat="cat1">cat 1</div>
  <div data-cat="cat2">cat 2</div>
</div>
<div id="products" class="block">
  <div data-cat="cat1" data-prod="prod1">prod 1</div>
  <div data-cat="cat1" data-prod="prod3">prod 3</div>
  <div data-cat="cat2" data-prod="prod2">prod 2</div>
  <div data-cat="cat2" data-prod="prod4">prod 4</div>
</div>
<div id="card" class="block">
  <div data-prod="prod1">card prod 1</div>
  <div data-prod="prod2">card prod 2</div>
  <div data-prod="prod3">card prod 3</div>
  <div data-prod="prod4">card prod 4</div>
</div>
</div>

БЛОГ НА HUSL

Как получить такой функционал?

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