jQuery Isotope：最初隐藏项目

Question

因此，我的项目可以具有多个用于过滤的类。像这样：

<div class="items>
    <div class="item category-1 category-2">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2">An item that displays initially.</div>
</div>

使用同位素，如何在页面加载时隐藏具有特定类的项目？假设我要隐藏任何类别为带initially-hidden负载的项目，但是当我单击该项目具有的其他任何类别的过滤器时，仍然能够显示该项目？对于上面的示例代码，说我单击了一个category-2过滤器，那么所有具有category-2（即使具有initially-hidden）的项目都会出现吗？

基本上在我正在处理的项目中，客户端希望能够最初在页面加载时隐藏项目，但是在过滤时显示它们。因此，我为她创建了一种使用标记这些内容的方法initially-hidden，但无法绕过如何最初隐藏它们的想法，但是当单击关联的过滤器时，仍然允许它们显示出来。

我已经通过desandro 遇到了这个小提琴，但这并不是我要找的东西，因为它假定每个项目只有一个类（红色，绿色或蓝色）。

编辑

这是我编辑过的desandro小提琴的一部分，它更像我的情况（项目可以有多个类）。小提琴。

最终编辑

答案似乎是相反的，添加一个initially-shown类并过滤页面加载时的那些类。因此，没有让我的客户将所有内容都标记为initially-shown，而是使用了这种方法：

$container.find('.tile:not(.initially-hidden)').addClass('initially-shown');

因为它们有数百个项目，而且似乎只藏了极少数。

这是最新的小提琴。

Answer 1

我的意思是有几种方法可以实现此结果：在 dom 准备就绪时创建一个仅显示您想要的结果的过滤器，然后触发同位素。

<div class="items>
    <div class="item category-1 categor-2 initial-show">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2 initial-show">An item that displays initially.</div>
    <div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
    <div class="item category-1 category-2 initial-show">An item that displays initially.</div>
</div>

JS

$( document ).ready(function() {
  var PageLoadFilter = '.initial-show';
  $container.isotope({ filter: PageLoadFilter});
});

您的小提琴默认设置为过滤红色： http: //jsfiddle.net/KWvME/96/