我有一个列表,我想要一个过滤器,我的复选框按 this question 所示工作。 。
在我的页面上,页面顶部的选项卡已经可以正常工作,如下面的代码和 this fiddle 中所示。 .
但是它们彼此冲突,因此目前如果您在单击第 1 列的复选框时单击 xtr1,则会删除所有第 1 列并显示所有 xtr1。 例如,我希望它显示所有已勾选 col 1 的 xtra1 。我尝试通过添加变量 addchosen 来处理此问题,如下所示,但无法使其工作,如何才能最好地实现这一点?
<div id="nav">
<a rel="all" id="all">All</a>
<a rel="xtr1" id="xtr1">xtr1</a>
<a rel="xtr2" id="xtr2">xtr2</a>
<a rel="xtr3" id="xtr3">xtr3</a>
</div>
<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="xtr3 all item cat-3 col-1">col 1 - cat 3 - xtra 3</li>
<li class="xtr1 all item cat-3 col-1">col 1 - cat 3 - xtra 1</li>
<li class="xtr1 all item cat-3 col-1">col 1 - cat 3 - xtra 1</li>
</ul>
(列表中有更多项目)
JS
var chosen = "";
jQuery("#nav a").on("click", function (event) {
jQuery("#nav a").removeClass("current");
jQuery(this).addClass("current");
chosen = jQuery(this).attr("rel");
jQuery(".item").not("." + chosen).hide();
jQuery("." + chosen).show();
});
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;
var addchosen = "";
if (chosen) {
addchosen =', .' + chosen;
}
if(cats.length){
$fitems = $fitems.filter('.' + cats.join(', .') + addchosen );
}
if(cols.length){
$fitems = $fitems.filter('.' + cols.join(', .'));
}
$fitems.show();
$items.not($fitems).hide();
} else {
$items.show();
}
});
最佳答案
我稍微修改了你的代码。有一种更简洁的方法可以做到这一点,但我不想改变您的思路。
因此,我创建了一个名为 refine()
的函数,基本上隔离了这部分代码,并添加了一个用于选择的过滤器:
if(cats.length){
$fitems = $fitems.filter('.' + cats.join(', .') + addchosen );
}
if(cols.length){
$fitems = $fitems.filter('.' + cols.join(', .'));
}
因此,在 nav
点击和 cols/cats
更改时都会调用此函数,如下所示:
var cats=[], cols=[], $fitems;
var $items = jQuery('.item');
var chosen = "";
function refine() {
$items.show();
$fitems = $items;
if(chosen.length && chosen != 'all') {
$fitems = $items.filter('.' + chosen);
}
if(cats.length){
$fitems = $fitems.filter('.' + cats.join(', .'));
}
if(cols.length){
$fitems = $fitems.filter('.' + cols.join(', .'));
}
$fitems.show();
$items.not($fitems).hide();
}
jQuery("#nav a").on("click", function (event) {
jQuery("#nav a").removeClass("current");
jQuery(this).addClass("current");
chosen = jQuery(this).attr("rel");
refine();
});
var $cats = jQuery('#refine-cat input[type=checkbox]');
var $cols = jQuery('#refine-col input[type=checkbox]');
$cols.add($cats).on('change', function (e) {
cats = $cats.filter(':checked').map(function(){
return 'cat-' + (this.value || '')
}).get();
cols = $cols.filter(':checked').map(function(){
return 'col-' + (this.value || '')
}).get();
refine();
});
这是您的fiddle
关于javascript - jQuery 通过复选框和单击来过滤项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18776842/