jQuery Isotope：最初隐藏项目答案

【问题标题】：jQuery Isotope: Hiding items initiallyjQuery Isotope：最初隐藏项目
【发布时间】：2014-12-24 07:46:41
【问题描述】：

所以我有可以有多个过滤类的项目。像这样的：

<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 的 this fiddle，但这并不是我想要的，因为它假定每个项目只有 1 个类别（红色、绿色或蓝色）。

编辑

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

最终编辑

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

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

因为他们有 100 多件物品，而且似乎只隐藏了一小部分。

这是更新后的fiddle。

【问题讨论】：

有什么理由不能只使用style="display:none;"，或者将.initially-hidden 的css 设置为display:none？
向我们展示您已经拥有的代码 - 这可能是 CSS 的解决方案。
那或多或少jsfiddle.net/KWvME/93
@DLeh，没那么容易，这是我尝试的第一件事。
@neiesc，哈哈，看看我对原帖的编辑。

标签： jquery jquery-isotope jquery-masonry

【解决方案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/

【讨论】：

但我希望显示所有过滤器，但最初隐藏的除外。这就是我不知道该怎么做。由于 category-2 也可以有一个初始隐藏或不隐藏的类，这就是让这个变得更棘手的原因。
在您想要显示和过滤的项目上添加类初始显示？
这可行，但我的客户不必像最初显示的那样标记所有内容，而是这样做：$container.find('.item:not(.initially-hidden)').addClass('initially-shown'); 在调用同位素之前。

【解决方案2】：

为了最好地使用 Isotope，请执行相反的操作 -

而不是.initially-hidden 做.initially-shown 并将过滤器默认设置为那个。

$container.isotope({ filter: '.initially-shown'});

或者你可以做一个这样的选择器：

$container.isotope({ filter: ':not(.initially-shown)'});

但我怀疑这会奏效......

【讨论】：

【解决方案3】：

当我尝试这样做时，在初始加载（初始显示）时未加载的项目，在您单击其他视图时不会显示。

【讨论】：