В основном у меня есть четыре уровня фильтра: формат, регион, демография и интересы.
<div class="form-div">
<input type="checkbox" data-filter="i-newspaper">
<input type="checkbox" data-filter="i-magazine">
</div>
<div class="form-div">
<input type="checkbox" data-filter="i-northland">
<input type="checkbox" data-filter="i-southland">
</div>
<div class="form-div">
<select>
<option value="4" data-filter="i-digital">Digital</option>
<option value="1" data-filter="i-manufacturing">Manufacturing</option>
<option value="2" data-filter="i-retail">Retail</option>
</select>
</div>
<div class="form-div">
<input data-filter="i-business-and-finance" type="checkbox">
<input data-filter="i-careers-and-education" type="checkbox">
<input data-filter="i-design-and-photography" type="checkbox">
</div>
Фильтры из изотопов основаны на том, что отмечено/выбрано выше.
Я использовал что-то вроде этого:
var selectors = [];
$(".form-div").find("input:checked, option:selected").each(function(){
selectors.push('.'+$(this).data('filter'));
});
selectors = selectors.join('');
Который предоставлял селектор типа .i-newspaper.i-magazine.i-northland.i-southland.i-digital.i-design-and-photography (при условии, что это были отмеченные/выбранные элементы формы)
Однако каждый .form-div представляет собой отдельный набор, поэтому с приведенным выше выбором я надеюсь получить:
.i-newspaper.i-southland.i-digital.i-design-and-photography,
.i-newspaper.i-northland.i-digital.i-design-and-photography,
.i-magazine.i-southland.i-digital.i-design-and-photography,
.i-magazine.i-northland.i-digital.i-design-and-photography
Как добиться чего-то подобного?
Дайте мне знать, если мой вопрос нуждается в дополнительных разъяснениях...
Спасибо
ИЗМЕНИТЬ
Другим альтернативным решением этой проблемы является «многоуровневая» фильтрация.
Итак, отфильтруйте по этому набору: .i-newspaper, .i-magazine
Затем отфильтруйте подмножество по этому набору: i-southland, .i-northland
И так далее...
EDIT2 JsFiddle: http://jsfiddle.net/MkME9/
