Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 11.07.2021
Сообщений: 2

Фильтрация товаров на сайте

11.07.2021, 15:08. Показов 1205. Ответов 1

Студворк — интернет-сервис помощи студентам
Добрый день.
Суть вопроса в следующем – нужно как-то объединить 2 скрипта, которые нашёл в интернете в один, чтобы можно было фильтровать товары по нескольким значениям атрибута data-size («size_42 size_44 size_44» или «42 44 46»). Однако, у меня в первом случае не получается получить фильтрацию по нескольким значениям, указанным в одном атрибуте, во втором случае не получается выполнить «откат» при выборе значения option «не важно». Учитывая, что я не самый опытный программист – бьюсь с этой задачей безуспешно уже несколько дней. Заранее благодарен, если кто-то сможет помочь с решением этой задачи.

Вот первый вариант (не получается выполнить фильтрацию по нескольким значениям data-size):
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
 Размер <select id="size_selection">
    <option value="no_matter">не важно</option>
    <option value="size_42">42</option>
    <option value="size_44">44</option>
    <option value="size_46">46</option>
  </select>
  <div>
    <div class="model" data-size="size_42">Размер 42</div>
    <div class="model" data-size="size_44">Размер 44</div>
    <div class="model" data-size="size_46">Размер 46</div>
    <div class="model" data-size="size_42 size_44 size_44">Размерs 42 44 46</div>
  </div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var
    filters = {
      size: null
    };
  function updateFilters() {
    $('.model').hide().filter(function () {
      var
        self = $(this),
        result1 = true; 
      Object.keys(filters).forEach(function (filter) {
        if (filters[filter] && (filters[filter] != 'no_matter')) {
          result1 = result1 && filters[filter] === self.data(filter);
        }
      });
      return result1;
    }).show();
  }
  function changeFilter(filterName) {
    filters[filterName] = this.value;
    updateFilters();
  }
 
  $('#size_selection').on('change', function () {
    changeFilter.call(this, 'size');
  });
А это второй вариант (не получается выполнить "откат" при нажатии на "не важно"):
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
Размер <select name="size_selection" id='filter'>
    <option value="no_matter">не важно</option>
    <option value="42">42</option>
    <option value="44">44</option>
    <option value="46">46</option>
  </select>
  <div>
    <div class="size" data-size="42">Размер 42 </div>
    <div class="size" data-size="44">Размер 44</div>
    <div class="size" data-size="46">Размер 46</div>
    <div class="size" data-size="42 44 46">Размеры 42,44,46</div>
  </div>
JavaScript
1
2
3
4
5
6
7
8
9
10
function filter(e) {
      $('.size').hide().filter(function() {
        var result = new RegExp('\\b' + e + '\\b');
        return result.test($(this).data('size'));
      }).show();
    }
    $("#filter").on('change', function() {
      var selectSize = $(this).val();
      filter(selectSize);
    });
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
11.07.2021, 15:08
Ответы с готовыми решениями:

Фильтрация товаров на сайте (checkbox)
Добрий день возник такой вопрос около фильтров на сайтах електроной комерции стоит число (количество товаров ) которие появятса после...

Фильтрация товаров по типу
Приветствую форумчане! Нужна помощь! Я новичёк и только изучаю PHP. При нажатии на ссылку 'Ноутбуки' или 'Персональные ПК'...

Фильтрация товаров по категории
Помогите реализовать фильтрацию товаров по категории. Мне надо что бы при клике на соответствующий option оставались только те товары на...

1
0 / 0 / 0
Регистрация: 11.07.2021
Сообщений: 2
16.07.2021, 16:10  [ТС]
Решил пока эту задачу следующим образом:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 Цвет <select class="filter color_filter">
    <option value="no_matter">не важно</option>
    <option value="red">красный</option>
    <option value="blue">синий</option>
    <option value="yellow">жёлтый</option>
  </select>
 
  Размер <select class="filter size_filter">
    <option value="no_matter">не важно</option>
    <option value="42">42</option>
    <option value="44">44</option>
    <option value="46">46</option>
    <option value="48">48</option>
  </select>
 
  Цена <select class="filter price_filter">
    <option value="no_matter">не важно</option>
    <option value="more">больше</option>
    <option value="less">меньше</option>
  </select>
 
  <div class="filters_test">
    <p>Извините, по ващему запросу ничего не найдено</p>
    <p>Рекомендуем изменить настройки фильтра каталога товара</p>
  </div>
 
  <div class="model_assortment">
    <div class="model" data-color="red" data-size_42="42" data-price="1500">Цвет красный, размер 42, цена 1500р</div>
    <div class="model" data-color="blue" data-size_44="44" data-price="1000">Цвет синий, размер 44, цена 1000р</div>
    <div class="model" data-color="red" data-size_46="46" data-price="2500">Цвет красный, размер 46, цена 2500р</div>
    <div class="model" data-color="blue" data-size_42="42" data-size_44="44" data-size_46="46" data-size_48="48" data-price="2000">Цвет синий,размеры 42,44,46,48, цена 2000р</div>
  </div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 $(".filter").on("change", function () {
  
    $(".model").each(function () {  
 
      $model = $(".model");
      $model_data = $(this).data();
      $array_model = $.makeArray($model);
 
      $color_filter = $(".color_filter").val();
 
      if ($color_filter == "no_matter") {
        $color_filter = !$(".color_filter").val();
      }
 
      $size_filter = $(".size_filter").val();
 
      if ($size_filter == "no_matter") {
        $size_filter = !$(".size_filter").val();
      }
 
      $price_filter = $(".price_filter").val();
 
      if ($price_filter == "no_matter") {
        $price_filter = !$(".price_filter").val();
      }
 
      $model.show();
   
      if ($(".color_filter").val() == $color_filter) {
        $(".model").not("[data-color = '" + $color_filter + "']").hide();
      }
     
      if ($(".size_filter").val() == $size_filter) {
        $(".model").not("[data-size_" + $size_filter + " = '" + $size_filter + "']").hide();
      }
 
      if ($price_filter == "more") {
        $array_model.sort(function (a, b) {
          return $(a).data("price") - $(b).data("price")
        });
        $($array_model).appendTo(".model_assortment");
      } else if ($price_filter == "less") {
        $array_model.sort(function (a, b) {
          return $(b).data("price") - $(a).data("price")
        });
        $($array_model).appendTo(".model_assortment");
      }
 
    });
 
    if ($(".model").is(":visible")) {
      $(".filters_test").hide();
    } else {
      $(".filters_test").show();
    }
 
  });
Буду признателен, если всё же кто-нибудь предложит более "изящное" решение.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
16.07.2021, 16:10
Помогаю со студенческими работами здесь

Фильтрация товаров на странице бренда
Всем здравия. Никак не пойму как задавать фильтры для выборки товаров. Сейчас пытаюсь вывести товар на странице бренда. Подключил...

Фильтрация товаров в разделе каталога
Всем здравия. В каждом разделе каталога есть подраздел аксессуаров по типу товара. Сортировка в разделе стоит по цене - чтобы посетитель...

Сложная фильтрация товаров по свойствам
Добрый день, уважаемые форумчане, столкнулся с некоторой сложностью и хотел бы получить совета от более опытных коллег. Есть 3...

Фильтрация товаров, выпадающий список
Здравствуйте! Прошу у Вас помощи, делаю фильтр товаров для интернет-магазина, проблема вот в чем когда я создаю выпадающий список с помощью...

Фильтрация товаров при выставлении счета
Добрый день! Вопрос такой: Есть одна большая таблица товаров разных типов (пример: телевизоры - 50шт., холодильники - 50шт., и т.д.). ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru