Должен по нажатию по кнопке Молочный или готовый добавлять класс hd
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css.css">
<title>Магазин</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5">
<h1 class="text-center">Прайс лист</h1>
</div>
</div>
<div class="row">
<div class="col-lg-5">
<h5 class="text-center">Список</h5>
<ul class="cart"></ul>
</div>
</div>
<nav>
<ul>
<li data-f="все">Все></li>
<li data-f="milk">Молочный</li>
<li data-f="on">готовый</li>
<li data-f="cat3">cat3</li>
</ul>
</nav>
<div class="row shop-field">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="shop.js"></script>
</body>
</html>
$(document).ready(function(){
let cart = {};
let goods = {};
$.getJSON('https://spreadsheets.google.com/feeds/list/1G30WCLNe5IiOKgRCPgVCmvpOqg7u-Iy-2NKr4m-S6hg/1/public/values?alt=json', function(data){
data = data ['feed']['entry'];
console.log(data);
showGoods(data);
});
const filterBox = document.querySelectorAll('.card');
document.querySelector('nav').addEventListener('click', event =>{
if (event.target.tagName !== 'LI') return false;
let filterClass = event.target.dataset['f'];
filterBox.forEach(elem =>{
elem.classList.remove('hd')
if (!elem.classList.contains(filterClass) && filterClass!== 'all'){
elem.classList.add('hd')
}
})
})
function showGoods(data){
var out = '';
for(var i=0; i<data.length;i++){
if (data[i]['gsx$show']['$t'] !=0){
out += `<div class="card" style="width: 18rem;">`
out += `<img class="card-img-top" src="${data[i]['gsx$image']['$t']}" alt="Card image cap">`
out += `<div class="card-body">`
out += ` <h5 class="card-title">${data[i]['gsx$name']['$t']}</h5>`
out += `<p class="card-text">${data[i]['gsx$opis']['$t']}</p>`
out += `<h5 class="cost">Цена: ${data[i]['gsx$cost']['$t']}р.</h5>`
out += ` <a href="#" class="btn btn-primary" name="add-to-cart" data="${data[i]['gsx$id']['$t']}">Добавить в список</a>`
out += `</div>`
out += `</div>`;
}
}
$('.shop-field').html(out);
}
})
