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

Question

我有一个过滤器搜索工作，它有 2 个类别过滤器：

类别
业务类型

过滤器按钮是使用复选框 hack 构建的，因此我可以一次 select 多个按钮。我的问题是，如果我 select 2 来自顶部（类别）部分，它将进行过滤。即：登陆页面/博客但是如果我 select 1 从顶部和 1 从底部（即：博客/B2B）

它将提取所有 B2B 选项，而不仅仅是博客。我相信我的问题发生在我在 Isotope.JS.

中加入过滤器的地方

这是我的 fiddle 和我的一个工作示例

我的 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 });
  });


});

Answer 1

过滤器类似于 jQuery 或 CSS 语法。 .blog, .b2b 表示 "items with class blog OR b2b"。您正在寻找 .blog.b2b

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

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

Joining multiple checkbox filters within Isotope.js

javascript

jquery

html

jquery-isotope