Помогите с решением, пожалуйста.
Нужно из json массива вывести данные по табам в зависимости от категории и сделать общий таб где будут выводиться все товары. В каждом табе изначально должно отображаться к примеру по 4 позиции и по нажатию на кнопку loadmore должно подгружаться еще 4 нужной категории. Вот частичное решение : https://codepen.io/Mr_Sergo/pen/NJaqXz
Лучше всего генерировать табы из самого json, а не “зашивать” их в html-е.
В чем именно затыка? Или ты хочешь получить готовое решение задачи?
Проблема в том что мне пока не хватает знаний чтобы реализовать это так как мне бы того хотелось. Не могу связать все вместе.
Не хочется казаться наглым, но да, хотелось бы получить готовое решение задачи.
Готовое решение не дам. Но разобраться помогу.
https://jsfiddle.net/zae61kL8/1/
Вот пример генерации табов из структуры данных. Пока не думая о стилях, думай только о разметке, напиши генерацию списка продуктов в productsNode.
for для меня был более привычен, но стоило ли перебор сделать через forEach или нет?
Значит ты попал по адресу.
Дальше https://jsfiddle.net/dq9r278g/
Есть 2 массива с узлами табов и узлами контейнеров с продуктами. Реализуй функции activateTab и deactivateAllTabs.
Если все сделал верно, то должна активироваться только 1 таба, первая и должны быть видны продукты только из нее.
Все равно.
Готово. Даже смог сделать все категории активными. Не знаю насколько правильно все это сделал правда. Были затруднения, но очень интересно!
https://jsfiddle.net/Debroneee/wjnc24y5/136/
addEventListenerДобрый день! Подскажите, корректно ли я вывел все элементы или есть какое-то более правильное решение?
Ссылки блокирует =(
Debroneee/wjnc24y5/144/
Дай ссылку еще раз пожалуйста. Система заблокировала сообщения, подумала что это спам.
jsfiddle(точка)net/Debroneee/wjnc24y5/144/
все равно блокирует
Почти закончил, остался последний пункт, но произошла заминка…
Полностью смог закончить категорию “All”, кнопка работает.
Но вот с остальными категориями беда. Если ограничить выдачу на какое-то к-во, то цикл пройдя по этому к-ву выдаст только те обьекты,которые соответствовали условию(1 или два, а не нужное к-во),а до некоторых категорий может вообще не дойти. Не совсем понимаю как правильно это реализовать(
jsfiddle(точка)net/Debroneee/d13qj5Lu/72/
Ты не упомянут что нужно будет сделать кнопку “Load more”.
Это важно упоминать потому что в зависимости от требований реализация кода будет выглядить по-разному: другой набор функций, другой подход. Частая ошибка начинающих в том что они думают что из текущего состояния кода Который решает задачу X можно прийти к состоянию кода что решает X+1 при этом не вносить структурных изменений в код.
Расскажи ка должна работать кнопка “Load more”?
Упомянул)
Пусть будет для примера такая картинка.
Таб All работает так как я думал - сначала выводится 4 поста, потом по нажатию кнопки еще 4 и так далее пока посты не закончатся, и кнопка пропадает или становится не кликабельной и меняет текста( сейчас не суть).
С остальными табами та же история, но в них должны загружаться только нужные категории.
В одной вкладке нужно нажимать “Load More”, но так чтобы она не затрагивала другие вкладки.
Я так это вижу по крайней мере.
Мне стоит быть внимательнее. Вижу.
История с организацией кода меняется полностью если добавить кнопку “loadMore”. Я думал “срезать углы” более простой реализацией. Придется идти классическим путем через моделирование предметной области через структуры данных.
Примерно такой костяк удовлетворит требованиям:
function createTabs(categories) {
let tabs = []
// создать табы, в том числе для всего списка продуктов
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
activateTab(i)
})
})
}
function createContainers(categories) {
let containers = []
// создать контейнеры, сделать такую разметку чтобы было удобно убирать список продуктов, но оставить кнопку
// типа
// <div>
// <div class="products"></div>
// <div class="controls">
// <button class="load-more">Load more</button>
// </div>
// </div>
containers.forEach((container, index) => {
// какое должно быть поведение для loadMore в общем табе?
container.querySelector('.load-more').addEventListener('click', () => {
loadMore()
updateContainersContents()
})
})
return containers
}
function updateContainersContents() {
// чисти .products div и заполняй продуктами
}
// main
const categories = [...]
const products = [...]
let tabs = createTabs(categories)
let containers = createContainers(categories)
activateTab(0)
updateContainersContents()
Спасибо! Буду пробовать. Это выглядит лучше чем получилось у меня.
https://jsfiddle.net/Debroneee/3krv2Ldf/latest/
Я вижу по ссылке свой код. Но не суть. Попробуй построить на этом скелете.