Javascript jQuery多个筛选器组

我试图根据Rory McCrossan在这里评论的示例构建一个过滤系统：

问题是，它不允许在一个筛选器组中使用多个筛选器。有什么建议吗

截图图像：它应该如何工作

HTML

<ul>
  <li>
    <div class="sts">
      <h2>Year</h2>
      <div class="checkbox">
        <label>
          <input data-id="2015" data-type="year" class="stat year" type="checkbox" />2015
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="2016" data-type="year" class="stat year" type="checkbox" />2016
        </label>
      </div>
    </div>
  </li>
  <li>
    <h2>Person</h2>
    <div class="ats">
      <div class="checkbox">
        <label>
          <input data-id="mike" data-type="person" class="stat person" type="checkbox" />Mike
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="tim" data-type="person" class="stat person" type="checkbox" />Tim
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="anne" data-type="person" class="stat person" type="checkbox" />Anne
        </label>
      </div>
    </div>
  </li>
  <li>
    <h2>Project</h2>
    <div class="dpts">
      <div class="checkbox">
        <label>
          <input data-id="google" data-type="project" class="stat project" type="checkbox" />Google
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="yahoo" data-type="project" class="stat project" type="checkbox" />Yahoo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="microsoft" data-type="project" class="stat project" type="checkbox" />Microsoft
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="facebook" data-type="project" class="stat project" type="checkbox" />Facebook
        </label>
      </div>
    </div>
  </li>
</ul>

<ul class="list">
  <li data-year="2015" data-person="mike" data-project="google">Mike's Google project from 2015</li>
  <li data-year="2016" data-person="mike" data-project="google">Mike's Google project from 2016</li>
  <li data-year="2016" data-person="mike" data-project="facebook">Mike's Facebook project from 2016</li>
  <li data-year="2015" data-person="anne" data-project="microsoft">Anne's Google project from 2016</li>
  <li data-year="2015" data-person="tim" data-project="yahoo">Tim's Yahoo project from 2015</li>
  <li data-year="2016" data-person="tim" data-project="facebook">Tim's Facebook project from 2016</li>
  <li data-year="2015" data-person="tim" data-project="google">Tim's Facebook project from 2016</li>
  <li data-year="2016" data-person="anne" data-project="yahoo">Anne's Yahoo project from 2016</li>
</ul>

---

在下面找到解决方案，仅在js中进行小的更改

$（'.stat'）。在（'change'，function（）上{
var$stats=$（'.stat:checked'）；
变量$items=$（'.list li'）；
$items.show（）；
如果（$stats.length==0）
返回；
$stats.each（函数（）{
var$stat=$（此）；
$items.hide（）.filter（函数（）{
返回$（this.data（$stat.data（'type'））==$stat.data（'id'）；
}).show（）；
})
});
ul{
列表样式：无；
}

选择：

2015年和2016年，蒂姆、雅虎和Facebook
它应该只显示以下行：

蒂姆2015年的雅虎项目

蒂姆2016年的Facebook项目





年
2015
2016


人
迈克
提姆
安妮


项目
谷歌
雅虎
微软
脸谱网



mike 2015年的google项目
2016年mike的google项目
2016年mike的facebook项目
2016年安妮的谷歌项目
蒂姆从2015年开始的雅虎项目
2016年起蒂姆的facebook项目
蒂姆从2016年开始的Facebook项目
2016年安妮的雅虎项目
这是我的jQuery/js

$('.stat').on('click', function() {
    var $stats = $('.stat:checked');
    var $items = $('.list li');

    $items.show();
    if ($stats.length == 0)
        return;

    var $vstats = $.map($stats, function(o) {return $(o).data('id'); });

    $stats.each(function() {
        var $stat = $(this);
        $items.filter(function() {
            return $vstats.indexOf($(this).data($stat.data('type'))) < 0;
        }).hide();
    })
});

$（'.stat'）。在（'click'，function（）上{
var$stats=$（'.stat:checked'）；
变量$items=$（'.list li'）；
$items.show（）；
如果（$stats.length==0）
返回；
var$vstats=$.map（$stats，函数（o）{return$（o）.data（'id'）；}）；
$stats.each（函数（）{
var$stat=$（此）；
$items.filter（函数（）{
返回$vstats.indexOf（$（this.data（$stat.data（'type'）））<0；
}).hide（）；
})
});

整个
抱歉，但是没有，例如，尝试选择2015和2016也尝试这些组合：2015+2016->这只显示2016个项目（应该显示所有项目）2015，Mike+Tim->这只显示Tim的项目（也应该显示Mike）如果我向数据添加多个值，我将如何更改脚本：data project=“yahoo，google，microsoft”我成功了！我的最后一个问题是：这能回答你的问题吗？
$('.stat').on('click', function() {
    var $stats = $('.stat:checked');
    var $items = $('.list li');

    $items.show();
    if ($stats.length == 0)
        return;

    var $vstats = $.map($stats, function(o) {return $(o).data('id'); });

    $stats.each(function() {
        var $stat = $(this);
        $items.filter(function() {
            return $vstats.indexOf($(this).data($stat.data('type'))) < 0;
        }).hide();
    })
});