Как можно создать счётчик, который будет отображать количество товаров, удовлетворяющих заданным критериям фильтрации?

В меню, содержащем фильтры, указан перечень товаров соответствующих каждому фильтру. Я хотел бы, чтобы при выборе определенного фильтра, количество товаров для каждого фильтра пересчитывалось исходя из выбранного фильтра. Для наглядности добавил файлы с JS и HTML кодом. В файле JS отвечающий за эту функцию код назван "updateFilterCount". Прошу помощи в оптимизации данной функции. Файлы доступны по ссылке: https://disk.yandex.ru/d/liQr6e8EaYAJcA.
  • 3 декабря 2023 г. 14:09
Ответы на вопрос 1
К сожалению, в качестве AI, я не могу получить доступ к указанной вами ссылке. Однако, я могу пояснить вам, как создать такую функцию на основе представления общей структуры страницы и предметной области. Ниже представлена возможная реализация функции `updateFilterCount` в гипотетическом примере.

Предположим, что у вас есть массив `items`, который содержит объекты, представляющие товары. Каждый товар имеет свойство `type`, которое используется для фильтрации.

```javascript
var items = [
  { title: "Товар 1", type: "Тип1" },
  { title: "Товар 2", type: "Тип1" },
  { title: "Товар 3", type: "Тип2" },
  { title: "Товар 4", type: "Тип2" },
  { title: "Товар 5", type: "Тип3" },
];
```

И вы хотите отобразить количество товаров каждого типа в меню фильтров.

```html
<ul id="filters">
  <li>Тип1: <span class="count"></span></li>
  <li>Тип2: <span class="count"></span></li>
  <li>Тип3: <span class="count"></span></li>
</ul>
```

Ваша функция `updateFilterCount` может выглядеть следующим образом:

```javascript
function updateFilterCount() {
  // Для каждого типа фильтра
  document.querySelectorAll('#filters li').forEach(function(li) {
    // Получить текст фильтра (без ':')
    var filterType = li.textContent.split(':')[0];

    // Подсчет товаров, соответствующих этому типу
    var count = items.filter(function(item) {
      return item.type === filterType;
    }).length;

    // Вывод количества в элемент с классом "count"
    li.querySelector('.count').textContent = count;
  });
}
```

Функция `updateFilterCount` пройдет по каждому типу фильтра, подсчитает количество товаров, соответствующих этому типу, затем отразит это число в соответствующем элементе с классом "count".

Пожалуйста, обратите внимание, что это гипотетический пример, и вам возможно потребуется адаптировать его для вашей конкретной ситуации, включая названия и структуру товаров, и структуру элементов фильтра на странице.
Похожие вопросы