在同位素.js中加入多个复选框过滤器

Joining multiple checkbox filters within Isotope.js

本文关键字:复选框 过滤器 同位素 js      更新时间:2023-10-23

我有一个过滤器搜索工作,它有两个类别过滤器:

  1. 类别

  2. 业务类型

过滤器按钮是使用复选框破解构建的,这样我就可以一次选择多个按钮。我的问题是,如果我从顶部(类别)部分选择2,它将进行过滤。即:登录页/博客但如果我从顶部选择1,从底部选择1(即:博客/BBA)

它将拉动所有B2B选项,而不仅仅是博客。我相信我的问题发生在我加入同位素.JS.中的过滤器的地方

这是我的小提琴和我的的工作示例

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

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