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遇到了this fiddle，但这并不是我正在寻找的东西，因为它假设每个项目只有1个类别（红色，绿色或蓝色）。

修改

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

最终编辑

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

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

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

这是一个更新的fiddle。

Answer 1

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

代替.initially-hidden执行.initially-shown，并将过滤器默认为。

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

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

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

但我怀疑这会起作用......

Answer 2

我的意思是有两种方法可以实现这个结果：在dom ready上创建一个只显示所需结果的过滤器，然后触发同位素。

<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/

Answer 3

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

jQuery Isotope：最初隐藏项目

3 个答案:

JS