Javascript jquery在更改时按类名筛选无序列表
我有一个很大的结果列表,我想用复选框过滤掉。因此,例如,当您单击cat3时,您应该会看到cat3类的所有项目,如果您同时单击cat2,您应该会看到cat2和cat3类的所有项目。在位于的以下代码中,我使用了onchange,因此如果单击cat3,它只显示cat3项目,但是我无法在此处使用多个记号,如何实现这一点Javascript jquery在更改时按类名筛选无序列表,javascript,jquery,html,filter,onchange,Javascript,Jquery,Html,Filter,Onchange,我有一个很大的结果列表,我想用复选框过滤掉。因此,例如,当您单击cat3时,您应该会看到cat3类的所有项目,如果您同时单击cat2,您应该会看到cat2和cat3类的所有项目。在位于的以下代码中,我使用了onchange,因此如果单击cat3,它只显示cat3项目,但是我无法在此处使用多个记号,如何实现这一点 <form id="refine-cat"> <span><input type="checkbox" value="1" name="filter
<form id="refine-cat">
<span><input type="checkbox" value="1" name="filtercol">cat 1</span>
<span><input type="checkbox" value="2" name="filtercol">cat 2</span>
<span><input type="checkbox" value="3" name="filtercol">cat 3</span>
</form>
<form id="refine-col">
<span><input type="checkbox" value="1" name="filtercat">col 1</span>
<span><input type="checkbox" value="2" name="filtercat">col 2</span>
<span><input type="checkbox" value="3" name="filtercat">col 3</span>
<span><input type="checkbox" value="4" name="filtercat">col 4</span>
</form>
<ul>
<li class="item cat-3 col-1">number 3</li>
<li class="item cat-3 col-1">number 3</li>
<li class="item cat-3 col-1">number 3</li>
<li class="item cat-1 col-1">number 1</li>
</ul>
试一试
演示:在执行jQuery('.item').hide()之前,似乎需要循环检查每个复选框,并确保没有其他复选框标记为check
我会这样做->我认为这里的副手最适合我,谢谢你的帮助!我在最初的问题中没有考虑这个问题,但是在我的页面上,我有一些标签来过滤内容,这些目前不适用于复选框,请看这个小提琴有什么可以推荐的吗?或者你认为最好单独问一个问题?@ak85单独问一个问题会更好。好主意,我已经单独问了。
jQuery('#refine-cat input[type=checkbox]').bind('change', function (e) {
var jT = jQuery(this);
var val = jQuery(this).attr('value') || '';
if (jT.is(':checked')) {
jQuery('.item').hide();
jQuery('.cat-' + val).show();
} else {
jQuery('.item').show();
jQuery('.cat-' + val).hide();
}
});
jQuery('#refine-col input[type=checkbox]').bind('change', function (e) {
var jT = jQuery(this);
var val = jQuery(this).attr('value') || '';
if (jT.is(':checked')) {
jQuery('.item').hide();
jQuery('.col-' + val).show();
} else {
jQuery('.item').show();
jQuery('.col-' + val).hide();
}
});
var $items = jQuery('.item');
var $cats = jQuery('#refine-cat input[type=checkbox]');
var $cols = jQuery('#refine-col input[type=checkbox]');
$cols.add($cats).on('change', function (e) {
var cats = $cats.filter(':checked').map(function(){
return 'cat-' + (this.value || '')
}).get();
var cols = $cols.filter(':checked').map(function(){
return 'col-' + (this.value || '')
}).get();
if(cats.length || cols.length){
var $fitems = $items;
if(cats.length){
$fitems = $fitems.filter('.' + cats.join(', .'));
}
if(cols.length){
$fitems = $fitems.filter('.' + cols.join(', .'));
}
$fitems.show();
$items.not($fitems).hide();
} else {
$items.show();
}
});
if (jT.is(':checked')) {
jQuery('.item').hide(); //--- Here, you are not taking into consideration that some .item(s) may need to remain shown if their respective checkbox is checked.
jQuery('.col-' + val).show();