Jquery 在同位素插件中的项目上使用多个筛选器

目标-用户应该能够选择单个选项或多个选项。基于该选择，具有正确类的div应该出现在堆栈中

没有正确类的div应该在堆栈中找到一个class.notpicket

对于div，单级运行良好参考：

然而，我不知道如何才能克服每个项目都有多个类的问题？我猜选择在这里是个问题

$container.isotope({
itemSelector: '.item',
// filter red items first

});

您可以在此处看到多个选项的完整代码：

---

您可以使用

在每次复选框更改时，将现有的添加/删除项替换为：

$container.isotope( 'updateSortData', $('.item'));

// Sort decending seems to simply reverse the sort so items reverse themselves
$container.isotope({ sortBy: 'matchCount'});//, sortAscending: false });

更新：添加了简单的

&&

逻辑，以排除

中没有所有选定类别的项目。取消勾选
：


更改为匹配计数：

// Simple && check of all categories.  
//
// Item must have all categories to be considered checked.
if((-count) && checkedItems.length === (-count)) {
    $elem.removeClass('notpicked');
} else {
    $elem.addClass('notpicked');
}

排序的演示运行得很好，但是我在哪里可以添加和删除类呢？如果用户选择“building1和studio”。我想将“2bedroom building1”和“3bedroom building1”指定为。即使building1已被选中，也未选中。@VishalKhialani-添加了逻辑，将所有与所有类别不匹配的项目设置为“unpicked”
$container.isotope( 'updateSortData', $('.item'));

// Sort decending seems to simply reverse the sort so items reverse themselves
$container.isotope({ sortBy: 'matchCount'});//, sortAscending: false });

// Simple && check of all categories.  
//
// Item must have all categories to be considered checked.
if((-count) && checkedItems.length === (-count)) {
    $elem.removeClass('notpicked');
} else {
    $elem.addClass('notpicked');
}