根据选择(同位素)创建过滤器 [英] 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('');

哪个提供了像.i-newspaper.i-magazine.i-northland.i-southland.i-digital.i-design-and-photography这样的选择器(假设这些是选中/选定的表单元素)

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)

但是，每个.form-div是一个单独的集合，因此希望通过以上选择得到:

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

如何实现这样的目标?

让我知道我的问题是否需要进一步澄清...

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

谢谢

编辑

针对此问题的另一种替代解决方案是多级"过滤.

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

因此请按以下设置进行过滤:.i-newspaper, .i-magazine

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

然后通过此集合过滤子集:i-southland, .i-northland

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

依此类推...

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

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

推荐答案

看我的 http://jsfiddle.net/MkME9/

这是您需要的吗?

编辑 这是正确的吗?

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

最后编辑(希望如此)

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

这篇关于根据选择(同位素)创建过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！