Question

我正在尝试使用isotope.js（http://isotope.metafizzy.co/sorting.html）对元素网格进行实时排序。插件本身非常简单，但我遇到了一个小麻烦，我找不到任何文档。

我想按照'类别'对元素进行排序。然而，这本身就很简单：问题是，每个元素都可能有多个类别。

因此，例如，我正在尝试排序的元素可能如下所示：

<div class="sortable-element" data-category="category_1">

但我想要它有多个类别？即：

<div class="sortable-element" data-category="category_1 category_2 category_3">

或者：

<div class="sortable-element" data-category="category_1, category_2, category_3">

有谁知道如何实现这一目标？

Answer 1

您不能在按字段排序中拥有多个值。但是你可以有多个字段，比如这个例子：

<div class="grid">
  <div class="grid-item" data-color="yellow">
    <p class="number">3</p>
  </div>
  <div class="grid-item" data-color="blue">
    <p class="number">2</p>
  </div>
  ...
</div>

var $grid = $('.grid').isotope({
  getSortData: {
    color: '[data-color]',
    number: '.number parseInt'
  },
  // sort by color then number
  sortBy: [ 'color', 'number' ]
});

请参阅此网页：http://codepen.io/desandro/pen/sxAJL

Answer 2

好的，我为你提供了一个快速了解的例子：

<section id="options" class="clearfix">
  <ul id="filters" class="option-set clearfix" data-option-key="filter">
    <li><a href="#" data-filter="*">show all</a></li>
    <li><a href="#" data-filter=".Superman">Superman</a></li>
    <li><a href="#" data-filter=".Supergirl">Supergirl</a></li>
    <li><a href="#" data-filter=".Spiderman">Spiderman</a</li>
    <li><a href="#" data-filter=".Batman">Batman</a</li>
  </ul>
</section> <!-- #options -->

<div id="container" class="clearfix">
  <div class="item Spiderman Superman Hulk">
    <p>Comic 1</p>
  </div>
  <div class="item Captain-America Superman Supergirl">
    <p>Comic 2</p>
  </div>
  <div class="item Nightcrawler Sub-Mariner Marv">
    <p>Comic 3</p>
  </div>
  <div class="item Hulk Nightcrawler Batman">
    <p>Comic 4</p>
  </div>
    <div class="item Nightcrawler Hulk Supergirl">
    <p>Comic 5</p>
  </div>
</div>

请参阅http://codepen.io/anon/pen/MyPNQJ

按类别排序;元素有多个类别（isotope.js）

2 个答案: