0

Учу JS и возник вопрос. Есть меню (такой вот фильтр товара) и есть сами карточки товара. У карточек есть класс status в html. Каким образом можно реализовать фильтрацию по этому классу? Например, чтобы я нажимал на пункт "New Product" и вылезали карточки только те карточки, у которых в статусе прописано New. Я не прошу готовое решение, хотелось бы узнать куда копать, что читать и каким образом это можно реализовать?

Карточки товара, сверху меню для фильтрации, стрелка ниже статус

HTML:

<ul class="shop__nav">
        <a href=""><li class="shop__item item-active">Best  Saler</li></a>
        <a href=""><li class="shop__item">New  Product</li></a>
        <a href=""><li class="shop__item">Sale  Product</li></a>
    </ul>
    <div class="shop__block">
        <div class="shop__card card-shop">
            <div class="card-shop__image">
                <a href=""><img src="img/card/card1.png" alt="" class="card-shop__picture"></a>
            </div>
            <div class="card-shop__info">
                <div class="card-shop__status">
                    <i class="fa-solid fa-bolt" style="color: #000000;"></i>
                    <h3 class="card-shop__status_title">NEW</h3>
                </div>          
                <a href=""><p class="card-shop__name">Eye Mesh Boat Shoes</p></a>
                <div class="card-shop__block-price">
                    <a href=""><h2 class="card-shop__price">$220.00</h2></a><span class="card-shop__discount"></span>
                </div>
                <button class="card-shop__button">ADD TO BAG</button>
            </div>
        </div>


    </div>

И ещё один вопрос, где собственно хранить эти карточки? Как это реализовано в интернет-магазинах? Если товаров 1000+, то наверное, нелогично их все хранить в html. Может они хранятся где-нибудь в базах данных или в виде объектов в JS или вообще в файле JSON?

5
  • а по разному хранят, кто в db кто то в json а кто то и там и сям .. выкручиваются 29 мар 2023 в 12:33
  • Спасибо за ответ! Теперь мне стало понятнее) 29 мар 2023 в 12:41
  • хранение: база данных + пагинация. Сортировка зависит от логики и конкретного приложения. Можно JavaScript на странице организовать, можно запрашивать данные из бд. Это зависит только от объема данных
    – Dmitry
    29 мар 2023 в 12:41
  • Не буду спорить с комментатором выше, но я не видел ни одного реального проекта, где данные подобного типа хранились бы в json файле. Можно найти тысячу причин использовать бд, если и не столь объемные и не столь функциональные базы, то как минимум sqlite
    – Dmitry
    29 мар 2023 в 12:43
  • Спасибо за развёрнутый ответ, Дмитрий. Обязательно об этом почитаю подробнее 29 мар 2023 в 12:52

1 ответ 1

0

Нужно пройтись по каждой карточке и сравнить ее класс, если класс равен new - карточка выводится на экран. Прочитайте в документации про querySelectorAll и forEach. На счет места хранения карточек я не уверен, но скорее всего они хранятся в базах данных, по крайней мере в моем проекте так реализовано)

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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