shuffle.jsで複数条件の絞り込み

グリッド上でソートや絞り込みができるshuffle.jsを使って複数条件の絞り込みをします。

複数の項目を持つものを、1つの条件で絞り込む

html

<ul class="type">
  <li data-group="t1">果物</li>
  <li data-group="t2">野菜</li>
</ul>

<div id="container">
  <div class="box" data-groups='["t2"]'>トマト</div>
  <div class="box" data-groups='["t2"]'>キャベツ</div>
  <div class="box" data-groups='["t1"]'>いちご</div>
  <div class="box" data-groups='["t1","t2"]'>スイカ</div>
</div>

javascript

$('.type li').click(function(){
  $('#container').shuffle('shuffle', $this.data('group'));
  return false;
});

$('#container').shuffle({
  itemSelector: '.box',
});

複数の条件でOR検索

果物と野菜の両方が選択できて、どちらかを持つものが表示される。

html

<ul id="type">
  <li data-group="t1">果物</li>
  <li data-group="t2">野菜</li>
</ul>

<div id="container">
  <div class="box" data-groups='["t2"]'>トマト</div>
  <div class="box" data-groups='["t2"]'>キャベツ</div>
  <div class="box" data-groups='["t1"]'>いちご</div>
  <div class="box" data-groups='["t1"]'>スイカ</div>
</div>

javascript

var $grid = $('#container');

$grid.shuffle({
  itemSelector: '.box'
});  

$('#tabs li a').on('click', function() {
  var $this = $(this);
  var $grid = $('#container');

  if($this.hasClass('active')){
    $this.removeClass('active');
  }else{
    $this.addClass('active');
  }

  $grid.shuffle('shuffle', function($el, shuffle){
    var g = [];
    $('#type a.active').each(function(){
      g.push($(this).data('group'));
    });
    return g.indexOf($el.data('groups')[0]) > -1;
  });

  return false;
});

以下のコードはおかしいので修正予定

複数の条件で絞り込む

html

<ul class="type">
  <li data-group="t1">果物</li>
  <li data-group="t2">野菜</li>
</ul>
<ul class="color">
  <li data-group="c1">赤</li>
  <li data-group="c2">緑</li>
</ul>

<div id="container">
  <div class="box" data-groups='["t2","c1"]'>トマト</div>
  <div class="box" data-groups='["t2","c2"]'>キャベツ</div>
  <div class="box" data-groups='["t1","c1"]'>いちご</div>
  <div class="box" data-groups='["t1","c2"]'>スイカ</div>
</div>

javascript

var t='',c='';
$('.type li').click(function(){
  t = $(this).data('group');
  return false;
});
$('.color li').click(function(){
  c = $(this).data('group');
  return false;
});

var shuffleFilter = function(){
  $('#container').shuffle('shuffle', function($el, shuffle){
    var d = $el.data('groups');
    var g = 0;
    g += (t != '' && d[0] != t)?-1:0;
    g += (c != '' && d[1] != c)?-1:0;
    return g === 0;
  });
}

$('#container').shuffle({
  itemSelector: '.box',
});

上の書き方はdata-groupが必ず2つの項目を持っている場合、という条件で書いてるので
項目数が可変の場合は書き方を変えないとダメです。

条件判断のところがもっとスマートに書けそうなんだけど。。

あと、上の場合は選択した条件を変数に格納していますが
クリックされたらaddClass('active')とかしておいて
shuffleFilter()の中でhasClass('active')なのを取ってゴニョゴニョした方がいいかも