jQuery Isotope：最初隐藏项目

2023年3月31日 245次阅读

所以我有可以有多个类进行过滤的项目.像这样的东西：

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

使用同位素,如何在页面加载时隐藏具有特定类的项目？假设我想要隐藏任何一个最初隐藏的类的项目,但是当我点击该项目具有的任何其他类的过滤器时,仍然可以显示该项目？对于上面的示例代码,假设我单击了一个类别2过滤器,那么所有具有类别2的项目(即使它们最初隐藏)也会出现？

基本上在我正在进行的项目中,客户希望能够在页面加载时初始隐藏项目,但在过滤时显示它们.因此,我为她创建了一种方法来标记最初隐藏的方法,但是无法解决如何隐藏最初的问题,但仍然允许它们在单击关联的过滤器时显示.

我已经通过desandro遇到了this fiddle,但这并不是我正在寻找的东西,因为它假设每个项目只有1个类别(红色,绿色或蓝色).

编辑

这是一个desandro小提琴的分支,我编辑的更像是我的情况(项目可以有多个类). Fiddle.

最终编辑

答案似乎是反过来,添加一个最初显示的类并在页面加载上过滤那些.因此,不是让我的客户端标记最初显示的所有内容,而是使用此方法：

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

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

这是一个更新的fiddle.

最佳答案 我的意思是有两种方法可以实现这个结果：在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/

点赞