Только начал изучение 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>
id
у элементов массива... Сутьid
это уникальность для своего обладателя, а у тебя они повторяются. Для такой информации вполне бы подошёлtype
...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 кнопки*))