0

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

没有正确类的 div 应该向下堆栈并有一个 .notpicked 类。

使用 div 的单个类可以很好地参考：http: //jsfiddle.net/GwBa8/56/

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

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

});

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

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

4

1 回答 1

0

您可以使用$.not()更接近一点

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

这将按照检查的顺序将事物保留在列表的前面。我相信这就是您所要求的，尽管它可能不是您最终想要的:)

示例小提琴

对我来说，用户体验有点像，因为检查了多个类别的项目不会将它们推到列表的顶部。

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

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

演示

主要变化：

添加了返回 -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：

演示小提琴

更改为 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');
}
于 2013-09-04T23:47:38.383 回答