Question

是否有可能以某种方式避免在使用（jQuery）同位素过滤内容时隐藏项目？

我之后的解决方案是将所有元素保留在Isotope容器中的位置，同时在点击按钮后以某种方式标记几个 - 重要的是始终显示容器中的所有元素。 / p>

我知道同位素提供了分类，但我不确定是否可以进行分类。

http://isotope.metafizzy.co/sorting.html

Answer 1

我可能只是使用普通的旧javascript / jQuery来选择和添加一个类或更改所需的项目。

所以，答案是，你不需要为此使用同位素。同位素可以制作一个很棒的布局，你可以保留它，但你可以用一些普通的旧javascript / jQuery来增加它。

Isotope的过滤实际上并不神奇。虽然您可以提供选择器：

$container.isotope({ filter: '.show-these' });

您可以轻松使用任何类型的javascript / jQuery-Fu来创建自己的集合：

$items = $('.show-these');
$container.isotope({ filter: $items });

如果你想在将来做一些高级过滤，这是一个很好的技巧。

要标记某些项目，您可以忘记同位素过滤部分，并对任何项目执行任何操作。对于标记，添加一个类可能是一个好主意（假设你使用jQuery）：

// HTML
<div class="buttons">
  <a href='#' data-highlight=".popular">Most Popular</a>
...

// Isotopoe Items
<ul>
  <li class="popular">Item #1</li>
...

// JS
$('.buttons').on('click', 'a', function () {
  var $this = $(this),
    category = $this.data('highlight');

  $(category).addClass('highlighted');
});

您需要做的就是为要添加的任何类添加一些css（highligh在上面的代码中。）

此外，上面的代码只是一种方式，您可能需要一些逻辑来选择和取消选择，或者您可能希望它们像单选按钮一样。

这应该指向正确的方向，如果您需要更多帮助，请告诉我。

标记而不是使用Isotope隐藏项目

1 个答案: