Jquery 如何将匹配结果添加到筛选器

我正在寻求帮助。大家好。我想添加一些匹配结果div。 我的意思是：

当我通过标记/取消标记复选框筛选元素时，我希望显示大量已筛选的报价。例如，如果复选框过滤器给出2个结果，我希望看到一些句子显示出来。“我们发现了两个结果。”

当过滤不会给出任何结果时，我希望看到信息：“未找到任何结果”

以下是此过滤器的JSFIDLE示例：

1.
2.
3.
4.
5.
6.
7.
8.




1 2 3 4
2 3
4 5
5 6
5
12
1 2 3
7 8

---

谢谢您的帮助。

我按照您的要求加入了结果计数，但决定重构您的代码，以使代码更容易阅读/理解。这将把220行JS减少到47行，并在jQuery选择器上提供缓存

$（文档）.ready（函数（）{
//缓存对所有复选框元素的引用
var复选框=$（'input:checkbox'），
//缓存对结果的引用
结果=$（“#结果”），
//缓存引用到我们的列表
listItems=$（'.tabela>li'），
//所选复选框元素的集合
selectedItems=[]；
复选框。on（'change'，function（）{
var id=this.id；
如果（选中此项）{
//推送元素与值
选择editems.push（此值）；
}否则{
//取消选中时删除项目
selectedItems.splice（selectedItems.indexOf（this.value），1）；
}
updateList（）；
});
var updateList=函数（）{
//参考所有已检查的复选框
var checked=$（'input:checkbox:checked'），
//创建用于连接的值映射
selectedItemsValues=selectedItems.sort（）.join（“”）；
如果（选中。长度）{
//筛选列表项
listItems.hide（）.filter（函数（））{
返回此.dataset.category.includes（SelectedItemsValue）；
}).show（）；
//只计算可见的li
var total=$（'.tabela li:visible'）。长度；
//呈现结果
html（'我们发现'+total+（total==1？'match'：'matches'）+'！'）；
}否则{
show（）；
html（'我们没有找到任何匹配项'）；
}
}
});

1.
2.
3.
4.
5.
6.
7.
8.




1 2 3 4
2 3
4 5
5 6
5
12
1 2 3
7 8

如果编辑您的问题并点击
Ctrl+M
或
图标，它将弹出现场代码段创建者，您可以在那里制作问题的工作示例，而不是链接到非现场代码段站点。Nice。但是如果我按5，6，7，应该不会有任何结果。我只想看到5,6,7的元素哦，我以为你是根据所选的数字过滤列表更新的：我修改了答案以匹配所请求的逻辑我能够用正确的逻辑将其减少到47行。让我知道这是否有用。太好了。也许你们知道这个问题的答案？我需要使用这些复选框的UI滑块过滤提供您的Revision将与我建立的滑块工作？
<div class="tabela-wrap">
  <label><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
  <label><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
  <label><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
  <label><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
  <label><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
  <label><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
  <label><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
  <label><input type="checkbox" name="fl-8" value="8" id="8" /> 8</label>
</div>

<br><br>

<ul class="tabela">
  <li class="tabelki" data-id="" data-category="1 2 3 4 ">1 2 3 4</li>
  <li class="tabelki" data-id="" data-category="2 3">2 3</li>
  <li class="tabelki" data-id="" data-category="4 5">4 5</li>
  <li class="tabelki" data-id="" data-category="5 6 ">5 6</li>
  <li class="tabelki" data-id="" data-category="5">5</li>
  <li class="tabelki" data-id="" data-category="1 2">1 2</li>
  <li class="tabelki" data-id="" data-category="1 2 3">1 2 3</li>
  <li class="tabelki" data-id="" data-category="7 8">7 8</li>

</ul>