1

введите сюда описание изображения

Нужно получить вот такую структуру(учусь верстать, взял макет из интернета Как сделать это всё в плане 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 показывание категорий второго уровня, под пунктом два, пример того, как пытался сделать вывод соответствующей карточки, но выходит так, что при смене категории, предыдущая карточка остаётся и в итоге они становятся друг на друга, вот почему мой вариант не подходит :(

2

1 ответ 1

2

Можно это сделать с помощью атрибута 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.