在Isotope.js中加入多个复选框过滤器

问题描述

我有一个具有2个类别过滤器的过滤器搜索工作

I have a filter search working that has 2 category filters:

1. 类别

1. Category

业务类型

过滤器按钮是使用复选框hack构建的，因此我可以一次选择多个按钮.我的问题是，如果我从顶部(类别)部分中选择2，它将进行过滤.即:登陆页面/博客但是，如果我从顶部选择1，从底部选择1(即Blogs/B2B)

The filter buttons are built using the checkbox hack so that I can select multiple ones at a time. My problem is, if I select 2 from the top (category) section, it will filter. Ie: Landing Pages / BlogsBut if I select 1 from the top and 1 from the bottom (ie: Blogs / B2B)

它将拉动所有B2B选项，而不仅仅是博客.我相信我在Isotope.JS中加入过滤器时会发生问题.

It will pull all the B2B options and not just the blogs. I believe my problem is happening where I join the filters in Isotope.JS.

这是我的 小提琴 ，其中有我的一个工作示例

Here is my fiddle with a working example of mine

我的JS函数是:

$(function(){

  var $container = $('.examples-container').isotope({
    itemSelector: '.example'
  });

  var $checkboxes = $('.filter-buttons label input');
  $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    var joinFilters = filters.join(', ');
    $container.isotope({ filter: joinFilters });
  });


});

推荐答案

过滤器类似于jQuery或CSS语法. .blog, .b2b的意思是类博客为b2b的项目".您正在寻找.blog.b2b

The filter is like a jQuery or CSS syntax. .blog, .b2b means "items with class blog OR b2b". You are looking for .blog.b2b

所以在您的代码var joinFilters = filters.join('');中而不是var joinFilters = filters.join(', ');

So in your code var joinFilters = filters.join(''); instead of var joinFilters = filters.join(', ');

这篇关于在Isotope.js中加入多个复选框过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！