Реализация каталога с фильтрами на JQuery
Добрый день, форумчане.
Сейчас делаю небольшой каталог при помощи JQuery, на страницу из CMS вывожу все товары, и при помощи фильтров скрываю/отображаю их в соответствии с запросом. Вот пример разметки фильтра товара: <form id="speedSet"> <select size="1" name="speed"> <option value="">Скорость</option> <option value="1-51">до 50км/ч</option> <option value="52-81">50-80км/ч</option> <option value="82-100">80-100км/ч</option> <option value="0-100">Показать все</option> </select> </form> Вот разметка секции с данными под фильтры: <ul class="forFilters"> <li class="speedFilter">Тут значение полученное из CMS</li> </ul> Вот скрипт в котором я сравниваю данные из выбранного <option> с данными из CMS: $(document).ready(function() { $('#speedSet').change(function(){ FilterSpeed(); }); }); function FilterSpeed(){ // Получаю значения формы фильтра в массив var fields = $("#speedSet").serializeArray(); // Показываю все элементы соответствующие фильтру $('.speedFilter').map(function(){ // Помещаю в переменную массив с крайними значениями фильтра var pwr = fields[0].value.split('-'); if ( // Сравниваю значения приведя их к числовому типу Number(pwr[0]) < Number($(this).text()) && Number(pwr[1]) > Number($(this).text()) ){ return this; } else { return null; } }).parent().parent().show(); // Скрываю все элементы несоответствующие фильтру $('.speedFilter').map(function(){ var pwr = fields[0].value.split('-'); if ( Number(pwr[0]) > $(this).text() || Number(pwr[1]) < $(this).text() ){ return this; } else { return null; } }).parent().parent().hide(); } Проблема состоит в том, что если сделать много таких фильтров (а их мне надо минимум 4), то те товары, которые попадают под один фильтр все равно выводятся, если соответствуют условию другого фильтра. А мне надо сделать так что бы если товар попал хоть под один фильтр больше не выводился... Намекните, мне пожалуйста, как это реализовать |
Часовой пояс GMT +3, время: 20:05. |