jquery - 如何将匹配结果添加到过滤器
问题描述
我正在寻求帮助。大家好。我想添加一些匹配结果 div。我的意思是:
当我通过标记/取消标记复选框来过滤元素时,我希望显示许多过滤后的报价。例如,如果复选框过滤器给出 2 个结果,我希望看到一些句子显示。“我们找到了 2 个结果。”
当过滤不会给出任何结果时,我想查看信息:“未找到结果”。
这是此过滤器的 jsfiddle 示例:https ://jsfiddle.net/q67oLwbd/2/
<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>
谢谢你的帮助。
解决方案
我按照您的要求包括了结果计数,但决定重构您的代码以帮助 DRY 并使代码更易于阅读/理解。这将您的 220 行 JS 减少到 47 行,并在您的 jQuery 选择器上提供缓存。
$(document).ready(function(){
// cache ref to all checkbox elements
var checkboxes = $('input:checkbox'),
// cache ref to results
results = $('#results'),
// cache ref to our list
listItems = $('.tabela > li'),
// collection of selected checkbox elements
selectedItems = [];
checkboxes.on('change', function(){
var id = this.id;
if(this.checked){
// push the element vs the value
selectedItems.push(this.value);
}else{
// remove items on uncheck
selectedItems.splice(selectedItems.indexOf(this.value), 1);
}
updateList();
});
var updateList = function(){
// ref all checked checboxes
var checked = $('input:checkbox:checked'),
// create map of values for joining
selectedItemsValues = selectedItems.sort().join(' ');
if(checked.length){
// filter list items
listItems.hide().filter(function(){
return this.dataset.category.includes(selectedItemsValues);
}).show();
// count visible li only
var total = $('.tabela li:visible').length;
// render results
results.html('We found ' + total + (total === 1 ? ' match' : ' matches' ) + '!');
}else{
listItems.show();
results.html('We did not find any matches.');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabela-wrap">
<label for="1"><input type="checkbox" name="fl-1" value="1" id="1" /> 1</label>
<label for="2"><input type="checkbox" name="fl-2" value="2" id="2" /> 2</label>
<label for="3"><input type="checkbox" name="fl-3" value="3" id="3" /> 3</label>
<label for="4"><input type="checkbox" name="fl-4" value="4" id="4" /> 4</label>
<label for="5"><input type="checkbox" name="fl-5" value="5" id="5" /> 5</label>
<label for="6"><input type="checkbox" name="fl-6" value="6" id="6" /> 6</label>
<label for="7"><input type="checkbox" name="fl-7" value="7" id="7" /> 7</label>
<label for="8"><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>
<div id="results"></div>
推荐阅读
- python - 测试套件失败后如何防止snakemake停止?
- r - 在 R 中将 case 组合到 cumsum 计算中的问题
- python - 如何在保存 Django 模型表单之前将数据更新到相关字段
- delphi - 编译有问题。Delphi 似乎可以编译,但编译后的应用程序没有反映所做的更改
- bash - 添加 awk 命令 bash 脚本
- jzmq - 从 jzmq 构建的 zmq.jar 中没有 ZFrame 或 ZMsg
- java - 如何从 JAVA 中的嵌套括号中提取子字符串?
- python - 在特定行之前分组提取数据框行?
- pytorch - 计算精度问题
- android - 错误:外部资源 http://schemas.android.com/apk/res/android 未注册