Проблема с фильтрацией в jQuery и JavaScript

Оффтоп javascript
1

У меня возникли сложности с кодом на JavaScript для фильтрации товаров по цене. Вот что меня беспокоит:

  1. Нужно добавить логику, чтобы опция “Более 50” отображалась в списке фильтров, когда есть товар, скажем, за 499 рублей. Сейчас это не работает.

  2. Код скрывает некоторые товары, которые должны отображаться. Например, товар стоимостью от 40 до 60 рублей должен показываться при выборе фильтра “40-50 рублей”.

Вот пример кода:

let priceRanges = {
  0: true,
  10: true,
  20: true,
  30: true,
  40: true,
  50: true
};

document.querySelectorAll('.product-price').forEach(el => {
  let price = parseInt(el.textContent);
  let range = Math.floor(price / 10) * 10;
  priceRanges[range] = false;
});

document.querySelectorAll('.filter-option').forEach(el => {
  let filterValue = parseInt(el.dataset.value);
  if (priceRanges[filterValue]) {
    el.style.display = 'none';
  }
});

Как можно исправить эти проблемы? Буду благодарен за любую помощь!

2

Для решения этих проблем можно модифицировать код следующим образом:

  1. Добавьте проверку на наличие товаров дороже 50 рублей:
let hasExpensiveItems = false;
document.querySelectorAll('.product-price').forEach(el => {
  let price = parseInt(el.textContent);
  if (price > 50) hasExpensiveItems = true;
  // остальной код
});

// Показываем опцию "Более 50", если есть дорогие товары
if (hasExpensiveItems) {
  document.querySelector('.filter-option[data-value="50"]').style.display = 'block';
}
  1. Измените логику фильтрации, чтобы учитывать диапазоны цен:
document.querySelectorAll('.filter-option').forEach(el => {
  let filterValue = parseInt(el.dataset.value);
  let nextValue = filterValue + 10;
  let hasProducts = false;
  
  document.querySelectorAll('.product-price').forEach(product => {
    let price = parseInt(product.textContent);
    if (price >= filterValue && price < nextValue) hasProducts = true;
  });

  el.style.display = hasProducts ? 'block' : 'none';
});

Эти изменения должны решить обе проблемы с фильтрацией.

3

эй, я тоже сталкивался с похожими проблемами при фильтрации! вот что можно попробовать:

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

а для корректной фильтрации по диапазонам, можно использовать два значения для каждого фильтра - минимум и максимум. например:

let priceRanges = [
  {min: 0, max: 10},
  {min: 10, max: 20},
  // ...
  {min: 50, max: Infinity}
];

затем проверять, попадает ли цена товара в выбранный диапазон. так товары от 40 до 60 будут отображаться в нужном фильтре.

надеюсь, эти идеи помогут! удачи с кодом!

4

Слушай, а может попробовать другой подход? Вместо жестких диапазонов, можно сделать слайдер с min и max ценой. Юзеры сами выберут нужный диапазон, а ты просто будешь фильтровать товары по заданным значениям. Так и с дорогими товарами проблем не будет, и фильтрация будет гибче. Еще можно добавить чекбоксы для популярных диапазон типа “до 1000” или “2000-5000”. Как думаешь, подойдет такой вариант?