creating filters from selections (isotope)

问题

I have four levels of filter, basically: format, region, demographics and interests.

<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>

The filters from isotope are based on what's checked/selected above.

I was using something like this:

var selectors = [];
$(".form-div").find("input:checked, option:selected").each(function(){
  selectors.push('.'+$(this).data('filter'));
});
selectors = selectors.join('');

Which was providing a selector like .i-newspaper.i-magazine.i-northland.i-southland.i-digital.i-design-and-photography (assuming these were the checked/selected form elements)

However, each .form-div is a separate set, so with the above selection I'd hope to get:

.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

How would something like this be achieved?

Let me know if my question needs more clarification...

Thanks

EDIT

Another alternative solution for this problem, is 'multi-level' filtering.

So filter by this set: .i-newspaper, .i-magazine

Then filter the subset by this set: i-southland, .i-northland

And so on and so forth...

EDIT2 JsFiddle: http://jsfiddle.net/MkME9/

回答1:

Look on my edit: http://jsfiddle.net/MkME9/

This is what You need?

EDIT This is correct?

http://jsfiddle.net/MkME9/6/

EDIT LAST (I hope )

http://jsfiddle.net/MkME9/9/

来源：https://stackoverflow.com/questions/12558661/creating-filters-from-selections-isotope

标签

javascript

jquery

jquery-isotope