Debroneee,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.header{
list-style: none;
display: flex;
}
.header li{
margin: 4px;
padding: 4px;
}
.header li.active{
background-color: #696969;
color: #FFFFFF;
}
.content li{
list-style: decimal-leading-zero;
}
.content li.up{
list-style: none;
border: 1px solid #000000;
border-radius: 3px;
display: inline-block;
}
</style>
<script>
var products = [
{productId:1, productName: 'Товар 1', categoryId:1},
{productId:2, productName: 'Товар 2', categoryId:2},
{productId:3, productName: 'Товар 3', categoryId:3},
{productId:4, productName: 'Товар 4', categoryId:4},
{productId:5, productName: 'Товар 5', categoryId:5},
{productId:6, productName: 'Товар 6', categoryId:1},
{productId:7, productName: 'Товар 7', categoryId:2},
{productId:8, productName: 'Товар 8', categoryId:3},
{productId:9, productName: 'Товар 9', categoryId:4},
{productId:10, productName: 'Товар 10', categoryId:5},
{productId:11, productName: 'Товар 11', categoryId:1},
{productId:12, productName: 'Товар 12', categoryId:2},
{productId:13, productName: 'Товар 13', categoryId:3},
{productId:14, productName: 'Товар 14', categoryId:4},
{productId:15, productName: 'Товар 15', categoryId:5},
{productId:16, productName: 'Товар 16', categoryId:1},
{productId:17, productName: 'Товар 17', categoryId:2},
{productId:18, productName: 'Товар 18', categoryId:3},
{productId:19, productName: 'Товар 19', categoryId:4},
{productId:20, productName: 'Товар 20', categoryId:5},
{productId:21, productName: 'Товар 21', categoryId:1},
{productId:22, productName: 'Товар 22', categoryId:2},
{productId:23, productName: 'Товар 23', categoryId:3},
{productId:24, productName: 'Товар 24', categoryId:4},
{productId:25, productName: 'Товар 25', categoryId:5}
];
var categories = [
{categoryId:1, categoryName: 'Футболки'},
{categoryId:2, categoryName: 'Майки'},
{categoryId:3, categoryName: 'Носки'},
{categoryId:4, categoryName: 'Джинсы'},
{categoryId:5, categoryName: 'Брюки'},
];
document.addEventListener("DOMContentLoaded", function() {
const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
if (target = target.closest(selector)) handler(target)
})
const data = {};
const render = (id, up) => {
let headerLi = `<li class="${id == 0 ? 'active' : ''}" data-id="0">All`;
categories.forEach(({categoryId, categoryName}) => headerLi +=
`<li class="${id == categoryId ? 'active' : ''}" data-id="${categoryId}">${categoryName}`);
document.querySelector(".header").innerHTML = headerLi;
if (!data[id]) data[id] = 4;
if (up) data[id] += 4;
let limit = data[id];
let contentLi = [];
for (const {productName, categoryId} of products)
if (id == 0 || categoryId == id) contentLi.push(`<li>${productName}`);
if (contentLi.length > limit) {
contentLi.length = limit;
contentLi.push(`<li class="up" data-id="${id}" >loadmore`);
}
document.querySelector(".content").innerHTML = contentLi.join('');
}
render(0);
const ClickHandler = el => render(el.dataset.id, el.classList.contains("up"));
on(document, "click", "[data-id]", ClickHandler);
});
</script>
</head>
<body>
<ul class="header"></ul>
<ul class="content"></ul>
</body>
</html>