Сортировать по категории; Элемент имеет несколько категорий (isotope.js)

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