Добрый день, форумчане.
Сейчас делаю небольшой каталог при помощи 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), то те товары, которые попадают под один фильтр все равно выводятся, если соответствуют условию другого фильтра. А мне надо сделать так что бы если товар попал хоть под один фильтр больше не выводился...
Намекните, мне пожалуйста, как это реализовать