0

Только начал изучение JS. Подскажите пожалуйста как привязать перебранный массив productDinner к кнопке Dinner? Что бы отображались только завтраки а остальные элементы страницы исчезали. И так нужно со всем списком меню. Или как лучше реализовать это

const CATALOG = [{
    id: 'dinner',
    img: '/img/pancakes.jpeg',
    name: 'Buttermilk Pancakes',
    price: '$15.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'dinner',
    img: '/img/dinner.jpg',
    name: 'Dinner Double',
    price: '$13.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'shakes',
    img: '/img/milkshakes.jpeg',
    name: 'Godzilla Milkshake',
    price: '$6.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'shakes',
    img: '/img/burger2.jpeg',
    name: 'Country Delight',
    price: '$20.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'dinner',
    img: '/img/egg_attack.jpg',
    name: 'Egg attack',
    price: '$22.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'shakes',
    img: '/img/oreo.jpg',
    name: 'Oreo Dream',
    price: '$18.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'lunch',
    img: '/img/bacon.jpg',
    name: 'Bacon Overflow',
    price: '$8.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'breakfast',
    img: '/img/Quarantine Buddy.jpg',
    name: 'Quarantine Buddy',
    price: '$16.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'lunch',
    img: '/img/steak.jpeg',
    name: 'Steak Dinner',
    price: '$39.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
  {
    id: 'breakfast',
    img: '/img/burger.jpg',
    name: 'American Classic',
    price: '$12.99',
    descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
  },
];
const ROOT_PRODUCTS = document.getElementById('products');
class Products {
  render() {
    let htmlCatalog = '';
    CATALOG.forEach(({
      id,
      img,
      name,
      price,
      descr
    }) => {

      htmlCatalog += `
                <li class = "products_element">
                    <span class="id">${id}</span>
                    <img class="img"src="${img}"/>
                    <span class="sub_header">
                        <span class="header_price">
                            <span class="h2">${name}</span>
                            <span class="price">${price}</span>
                        </span>
                        <div class="line_2"></div>
                        <span class="descr">${descr}</span>
                    </span>
                    
                </li>
            `;
    });

    const html = `
            <ul class = "products_container">
                ${htmlCatalog}
            </ul>
        `;
    ROOT_PRODUCTS.innerHTML = html;
  }
}

const productsPage = new Products();
productsPage.render();
const list = document.querySelector('.list');
const items = document.querySelectorAll('.list_item');


function filter() {
  list.addEventListener('click', event => {
    const targetId = event.target.dataset.id
    console.log(targetId)

    switch (targetId) {
      case 'all':
        break
      case 'dinner':
        break
    }
  })
}
filter()

let productDinner = CATALOG.filter(item => item.id == 'dinner');
console.log(productDinner);
<div class="container"></div>
<h1>Our menu</h1>
<div class="line"></div>
<div class="nav">
  <ul class="list">
    <li class="list_item"><button data-id="all" class="button button_all">All</button></li>
    <li class="list_item"><button data-id="breakfast" class="button button_breakfast">Breakfast</button></li>
    <li class="list_item"><button data-id="lunch" class="button button_lunch">Lunch</button></li>
    <li class="list_item"><button data-id="shakes" class="button button_shakes">Shakes</button></li>
    <li class="list_item"><button data-id="dinner" class="button button_dinner">Dinner</button></li>
  </ul>
</div>

<div id="products"></div>

2
  • Очень неудачно у тебя используются id у элементов массива... Суть id это уникальность для своего обладателя, а у тебя они повторяются. Для такой информации вполне бы подошёл type...
    – ksa
    Commented 7 мая 2023 в 7:31
  • Для начала я бы переписал ваш обработчик клика. Вам нужно убедиться, что клик был по кнопке внутри list_item. Дальше data-id я бы давал и для .products_element (хотя id не подходит для описания этого, это скорее category). Дальше мы проходимся по всем .products_element и даем например класс hide document.querySelectorAll(".products_element").forEach((el) => el.classList.toggle("hide", el.dataset.id !== *переменная с id кнопки*)) Commented 7 мая 2023 в 7:35

2 ответа 2

1
  • И так, для начала мы при рендере нашего списка продуктов добавим атрибут data-id, который будет равняться id нашего продукта из каталога (на самом то деле id здесь не подходит, более подходящее название - category).
  • Затем мы добавим метод filter в наш класс Products, который будет аргументом принимать категорию (наше значение data-id), в котором мы будем проходится по всем нашим .products_element и выставлять класс hide в зависимости от условия.
    В нашем случае класс hide получат элементы, чья категория (data-id) .products_element не равняется переданной и если категория не равняется all.
  • Мы немного переделаем наш обработчик клика, чтобы убедиться, что клик был именно по кнопке.

const CATALOG = [
    {
        id: 'dinner',
        img: '/img/pancakes.jpeg',
        name: 'Buttermilk Pancakes',
        price: '$15.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'dinner',
        img: '/img/dinner.jpg',
        name: 'Dinner Double',
        price: '$13.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/milkshakes.jpeg',
        name: 'Godzilla Milkshake',
        price: '$6.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/burger2.jpeg',
        name: 'Country Delight',
        price: '$20.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'dinner',
        img: '/img/egg_attack.jpg',
        name: 'Egg attack',
        price: '$22.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/oreo.jpg',
        name: 'Oreo Dream',
        price: '$18.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'lunch',
        img: '/img/bacon.jpg',
        name: 'Bacon Overflow',
        price: '$8.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'breakfast',
        img: '/img/Quarantine Buddy.jpg',
        name: 'Quarantine Buddy',
        price: '$16.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'lunch',
        img: '/img/steak.jpeg',
        name: 'Steak Dinner',
        price: '$39.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'breakfast',
        img: '/img/burger.jpg',
        name: 'American Classic',
        price: '$12.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    }
];

class Products
{
    render()
    {
        if (ROOT_PRODUCTS === null)
        {
            return;
        }

        let htmlCatalog = '';
        CATALOG.forEach(({ id, img, name, price, descr }) =>
        {
            htmlCatalog += `
                <li class="products_element" data-id="${id}"}>
                    <span class="id">${ id }</span>
                    <img class="img"src="${ img }"/>
                    <span class="sub_header">
                        <span class="header_price">
                            <span class="h2">${ name }</span>
                            <span class="price">${ price }</span>
                        </span>
                        <div class="line_2"></div>
                        <span class="descr">${ descr }</span>
                    </span>
                </li>
            `;
        });

        const html = `
            <ul class="products_container">
                ${ htmlCatalog }
            </ul>
        `;

        ROOT_PRODUCTS.innerHTML = html;
    }

    filter(category)
    {
        if (ROOT_PRODUCTS === null)
        {
            return;
        }

        const products = ROOT_PRODUCTS.querySelectorAll(".products_element");
        if (products === null)
        {
            return;
        }

        products.forEach((product) =>
        {
            product.classList.toggle("hide", category !== "all" && product.dataset.id !== category);
        });
    }
}


const ROOT_PRODUCTS = document.getElementById('products');
const productsPage = new Products();
productsPage.render();

const list = document.querySelector('.list');


function filter()
{
    list.addEventListener('click', ({target}) =>
    {
        if (target.classList.contains("button") === false)
        {
            return;
        }
        
        productsPage.filter(target.dataset.id);
    });
}

filter();
.hide { display: none; }
<div class="container"></div>
<h1>Our menu</h1>
<div class="line"></div>
<div class="nav">
  <ul class="list">
    <li class="list_item"><button data-id="all" class="button button_all">All</button></li>
    <li class="list_item"><button data-id="breakfast" class="button button_breakfast">Breakfast</button></li>
    <li class="list_item"><button data-id="lunch" class="button button_lunch">Lunch</button></li>
    <li class="list_item"><button data-id="shakes" class="button button_shakes">Shakes</button></li>
    <li class="list_item"><button data-id="dinner" class="button button_dinner">Dinner</button></li>
  </ul>
</div>

<div id="products"></div>

8
  • Добавлю еще, что в идеале класс Products должен содержать метод constructor и принимать root элемент, который в будущем сохранится внутри. Commented 7 мая 2023 в 8:01
  • я еще не совсем все понимаю) не подскажите про что стоит почитать или может видео в ютубе посмотреть, что бы разобраться в этом коде и я смог сам его написать
    – Mounty
    Commented 7 мая 2023 в 11:00
  • А это не ваш код? Commented 7 мая 2023 в 11:02
  • мой но я что-то сам писал, что-то с интернета брал и получилась каша в голове
    – Mounty
    Commented 7 мая 2023 в 11:03
  • Ну пройдитесь построчно и попытайтесь понять, что за что отвечает. Commented 7 мая 2023 в 11:05
0

Один из вариантов - создать отдельную переменную filteredData внутри класса PRODUCTS, в которую помещать отфильтрованный массив CATALOG, после чего выполнять метод render не всего каталога, а только filteredData.

const CATALOG = [
    {
        id: 'dinner',
        img: '/img/pancakes.jpeg',
        name: 'Buttermilk Pancakes',
        price: '$15.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'dinner',
        img: '/img/dinner.jpg',
        name: 'Dinner Double',
        price: '$13.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/milkshakes.jpeg',
        name: 'Godzilla Milkshake',
        price: '$6.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/burger2.jpeg',
        name: 'Country Delight',
        price: '$20.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'dinner',
        img: '/img/egg_attack.jpg',
        name: 'Egg attack',
        price: '$22.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'shakes',
        img: '/img/oreo.jpg',
        name: 'Oreo Dream',
        price: '$18.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'lunch',
        img: '/img/bacon.jpg',
        name: 'Bacon Overflow',
        price: '$8.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'breakfast',
        img: '/img/Quarantine Buddy.jpg',
        name: 'Quarantine Buddy',
        price: '$16.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'lunch',
        img: '/img/steak.jpeg',
        name: 'Steak Dinner',
        price: '$39.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
    {
        id: 'breakfast',
        img: '/img/burger.jpg',
        name: 'American Classic',
        price: '$12.99',
        descr: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit quia necessitatibus blanditiis minus est corporis cum inventore cumque dolorum recusandae possimus accusamus maiores voluptate adipisci, numquam quas facilis ut? Cum.'
    },
];
const ROOT_PRODUCTS = document.getElementById('products');
class Products {
    constructor (dataset) {
        this.data = dataset
        this.filteredData = dataset //для первоначальной отрисовки целого списка
    }
    filter(filterquery) {
        if(filterquery=='all'){
            this.filteredData = this.data
        } else {
            this.filteredData = this.data.filter(item => {
                return item.id == filterquery
            })
        }
    }
    render() {
        let htmlCatalog ='';
        this.filteredData.forEach(({id, img, name, price, descr}) => {
            
            htmlCatalog += `
                <li class = "products_element">
                    <span class="id">${id}</span>
                    <img class="img"src="${img}"/>
                    <span class="sub_header">
                        <span class="header_price">
                            <span class="h2">${name}</span>
                            <span class="price">${price}</span>
                        </span>
                        <div class="line_2"></div>
                        <span class="descr">${descr}</span>
                    </span>
                    
                </li>
            `;
        });
        
        const html = `
            <ul class = "products_container">
                ${htmlCatalog}
            </ul>
        `;
        ROOT_PRODUCTS.innerHTML = html;
    }
}

const productsPage = new Products(CATALOG);
productsPage.render();
const list = document.querySelector('.list');
const items = document.querySelectorAll('.list_item');

list.addEventListener('click', event =>{
    const targetId = event.target.dataset.id
    productsPage.filter(targetId)
    productsPage.render()
})
<div class="container"></div>
        <h1>Our menu</h1>
        <div class="line"></div>
        <div class="nav">
            <ul class="list">
                <li class="list_item"><button data-id="all" class="button button_all">All</button></li>
                <li class="list_item"><button data-id="breakfast" class="button button_breakfast">Breakfast</button></li>
                <li class="list_item"><button data-id="lunch" class="button button_lunch">Lunch</button></li>
                <li class="list_item"><button data-id="shakes" class="button button_shakes">Shakes</button></li>
                <li class="list_item"><button data-id="dinner" class="button button_dinner">Dinner</button></li>
            </ul>
        </div>

        <div id="products"></div>
    </div>

2
  • Не кажется, что это будет затратно каждый раз делать рендер? Commented 7 мая 2023 в 7:32
  • @OliverPatterson я предложил только один из вариантов. Конечно можно использовать виртуальный DOM в объеме одного из фреймворков для правильного рендеринга дерева объектов. Также вы можете дополнить ответ или предложить другой вариант. Commented 7 мая 2023 в 7:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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