Question

我正在使用伟大的同位素，一切正常，但现在我将做以下事情：

我们有十个数据过滤器，如Filter1，Filter2，Filter3等。一个项目包含例如Filter1和Filter2。如果我选择Filter1，则显示此项目 - 这没关系。如果我选择Filter2（Filter1仍然有效），该项目仍然存在 - 那也没关系。现在我选择Filter3（Filter1和Filter2仍处于活动状态），应该删除该项。这个案子不起作用。

如果我激活Filter3，我会收到包含Filter1 OR Filter2 OR Filter3的所有项目。但我只想要包含Filter1 AND Filter2和Filter3的项目。应删除所有带有缺失过滤器的项目（Filter1或Filter2或Filter3）。

这样做的最佳做法是什么？

代码：

<ul class="project-tags">
    <li><a class="all selected" data-filter="all">All</a></li>
    <li><a class="" title="Filter1" data-filter=".Filter1">Filter1</a></li>
    <li><a class="" title="Filter2" data-filter=".Filter2">Filter2</a></li>
    <li><a class="" title="Filter3" data-filter=".Filter3">Filter3</a></li>
    <li><a class="" title="Filter4" data-filter=".Filter4">Filter4</a></li>
</ul>


var $iso = $('#projects');

$ iso.isotope（{ animationEngine：''， itemSelector：'。color-shape'，石工： { columnWidth：257， columnHeight：147 } }）;

$.filterIsotope = function(filter)
{
    $iso.isotope({ filter:filter });
}

$('.sidebar a').click(function(event){
    //$("body,html").animate({scrollTop:125});
   // event.preventDefault();
    var cat = $(this).attr('data-filter'),
        $links = $('#work-grid2 .sidebar a:not(.all)'),
        filter = "";
    if (cat == 'all')
    {
        $links.removeClass('selected');
    }
    else
    {
        $('.sidebar a.all').removeClass('selected');
    }
    $(this).toggleClass('selected');
    $links.each(function(index){
        if ($(this).hasClass('selected'))
        {
            if (filter.length) filter += ", ";
            filter += $(this).attr('data-filter');
        }
    });
    if (filter == "") $('.sidebar a.all').addClass('selected');
    $.filterIsotope(filter);
})

Answer 1

我知道这有点晚了（也许几个月;）），但是对于其他人：

由于isotope filters只是普通的jQuery选择器，要过滤具有3个类（即AND）的元素，你需要这样的东西：

filter: '.Filter1.Filter2.Filter3'

在你的代码中，据我所知（元素会很好），这意味着删除这一行

if (filter.length) filter += ", ";

jQuery同位素 - 用AND过滤（排除）

1 个答案: