按类别排序;元素有多个类别(同位素.js）

Sort by Category; Element Has Multiple Categories (isotope.js)

本文关键字：同位素 js 排序 元素      更新时间：2023-09-26

我正在尝试利用同位素.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">

有谁知道如何做到这一点？

排序

依据字段中不能有多个值。但是您可以有多个字段，如以下示例所示：

<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

好的，我为你做的是一个快速理解的例子：

<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

相关文章：