Question

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

没有正确类的div应该进入堆栈并且有一个类.notpicked。

div有单班作品参考：http://jsfiddle.net/GwBa8/56/

但是我不知道如何克服每个项目的多个课程？我猜这里的选择是个问题？

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

});

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

http://jsfiddle.net/vishalkhialani/MCv7S/

Answer 1

您可以使用$.not()

进一步了解

$checked = $(checked);
$unchecked = $(unchecked).not($checked); // <== keeps all the checked stuff out of your not checked list

这将按照检查顺序将事物保留在列表的前面。我相信这就是你要求的，虽然它可能不是你最终想要的东西：）

Example fiddle

对我而言，虽然检查了多个类别的项目并没有进入列表的顶部，但UX有点像。

这是一个使用sortData来帮助重新排序项目的不同版本。它使用匹配类别的数量来突破列表中的内容。

它不记得类别选择的顺序，但我认为我会发布，因为它可能会激发其他一些想法。

Demo

主要变化：

添加了一个返回-1 * numberOfMatches的matchCount方法。这允许您使用Isotope的默认升序排序模式，并使Isotope不会颠倒元素的顺序。

getSortData: {
    matchCount: function ( $elem ) {
        var count = 0;
        $checkboxes.filter(':checked').each(function () {
            if($elem.hasClass(this.name)) {
                // Using a negative count here so we can use sort ascending
                // Keeps things in a better order as isotope animates the changes
                count--;
            }
        });
        return count;
    }
}

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

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

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

更新：添加了简单的&&逻辑，以排除.unpicked中没有所有选定类别的项目：

Demo fiddle

更改为matchCount：

// 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');
}

有多个过滤器处理同位素插件中的项目

1 个答案: