使用具有数据属性的jquery进行多重过滤 [英] Multiple Filter using jquery with data attribute
问题描述
我需要使用使用data
属性的多个过滤器.它可以组合工作,但不能单独工作.这是我的代码:
I need to use multiple filters using data
attributes. It's working in combination but not working alone. Here is my code:
<ul>
<li>
<div class="sts">
<h1>filter 1</h1>
</h1>
<div class="checkbox">
<label>
<input data-id="1" class="st" type="checkbox" />
1
</label>
</div>
<div class="checkbox">
<label>
<input data-id="2" class="st" type="checkbox" />
2
</label>
</div>
<div class="checkbox">
<label>
<input data-id="3" class="st" type="checkbox" />
3
</label>
</div>
</div>
</li>
<li>
<h1>filter 2</h1>
<div class="ats">
<div class="checkbox">
<label>
<input data-id="foo" class="at" type="checkbox" />
foo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="boo" class="at" type="checkbox" />
boo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="bar" class="at" type="checkbox" />
bar
</label>
</div>
</div>
</li>
<li>
<h1>filter 3</h1>
<div class="dpts">
<div class="checkbox">
<label>
<input data-id="a" class="dpt" type="checkbox" />
a
</label>
</div>
<div class="checkbox">
<label>
<input data-id="b" class="dpt" type="checkbox" />
b
</label>
</div>
<div class="checkbox">
<label>
<input data-id="c" class="dpt" type="checkbox" />
c
</label>
</div>
<div class="checkbox">
<label>
<input data-id="d" class="dpt" type="checkbox" />
d
</label>
</div>
</div>
</li>
</ul>
<ul class="list">
<li data-a="foo" data-st="1" data-dpt="a">asdw</li>
<li data-a="boo" data-st="2" data-dpt="c">qwedf</li>
<li data-a="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-a="bar" data-st="3" data-dpt="b">tazxsw</li>
<li data-a="bar" data-st="1" data-dpt="b">zxcvb</li>
<li data-a="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-a="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-a="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>
$(function() {
$('.at, .dpt,.st').on('click', function() {
var checkedat = $('.at:checked');
var checkeddept = $('.dpt:checked');
var checkedst = $('.st:checked');
if (checkedat.length || checkeddept.length || checkedst.length) {
if (checkeddept.length === 0) {
$('.list > li').hide();
$.each(checkedat, function() {
var prdId = $(this).attr('data-id');
$.each(checkedst, function() {
var brandId = $(this).attr('data-id');
$('.list > li[data-a="' + prdId + '"][data-st="' + brandId + '"]').show();
});
});
} else if (checkedat.length === 0) {
$('.list > li').hide();
$.each(checkedst, function() {
var brandId = $(this).attr('data-id');
$.each(checkeddept, function() {
var DeptId = $(this).attr('data-id');
$('.list > li[data-st="' + brandId + '"][data-dpt="' + DeptId + '"]').show();
});
});
} else if (checkedat.length === 0) {
$('.list > li').hide();
$.each(checkeddept, function() {
var DeptId = $(this).attr('data-id');
$.each(checkedst, function() {
var brandId = $(this).attr('data-id');
$('.list > li[data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show();
});
});
} else {
$('.list > li').hide();
$.each(checkedat, function() {
var prdId = $(this).attr('data-id');
$.each(checkedst, function() {
var brandId = $(this).attr('data-id');
$.each(checkeddept, function() {
var DeptId = $(this).attr('data-id');
$('.list > li[data-a="' + prdId + '"][data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show();
});
});
});
}
} else {
$('.list > li').show();
}
});
});
这是一个 jsFiddle链接
如果我检查过滤器1和&的任何选项,过滤器2&过滤器3正常工作,但是当我单击过滤器1或过滤器2中的任何选项时,
If i check any options from filter 1 & filter 2 & filter 3 its working , but when i click any option from filter 1 or filter 2 its not working
推荐答案
您的逻辑要比所需的复杂得多.您应该注意使用DRY原理,因为这可以使它变得更加简单.
Your logic is a lot more complicated than it needs to be. You should look in to using DRY principles as you can make this much more simple.
首先,在所有复选框上放置一个通用类(在示例中,我使用了.stat
).然后使用数据属性表示统计信息的类型.从那里,您可以遍历每个已检查的统计信息,并通过使用filter()
根据data-stat
和data-id
进行匹配来隐藏/显示相关的li
.像这样:
First, put a common class on all the checkboxes (I used .stat
in my example). Then use a data attribute to denote the type of the stat. From there you can loop through each checked stat and hide/show the related li
by using filter()
to match them based on the data-stat
and data-id
. Something like this:
$('.stat').on('click', function() {
var $stats = $('.stat:checked');
var $items = $('.list li');
$items.show();
if ($stats.length == 0)
return;
$stats.each(function() {
var $stat = $(this);
$items.filter(function() {
return $(this).data($stat.data('type')) != $stat.data('id');
}).hide();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="sts">
<h1>filter 1</h1>
<div class="checkbox">
<label>
<input data-id="1" data-type="st" class="stat st" type="checkbox" />1
</label>
</div>
<div class="checkbox">
<label>
<input data-id="2" data-type="st" class="stat st" type="checkbox" />2
</label>
</div>
<div class="checkbox">
<label>
<input data-id="3" data-type="st" class="stat st" type="checkbox" />3
</label>
</div>
</div>
</li>
<li>
<h1>filter 2</h1>
<div class="ats">
<div class="checkbox">
<label>
<input data-id="foo" data-type="at" class="stat at" type="checkbox" />foo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="boo" data-type="at" class="stat at" type="checkbox" />boo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="bar" data-type="at" class="stat at" type="checkbox" />bar
</label>
</div>
</div>
</li>
<li>
<h1>filter 3</h1>
<div class="dpts">
<div class="checkbox">
<label>
<input data-id="a" data-type="dpt" class="stat dpt" type="checkbox" />a
</label>
</div>
<div class="checkbox">
<label>
<input data-id="b" data-type="dpt" class="stat dpt" type="checkbox" />b
</label>
</div>
<div class="checkbox">
<label>
<input data-id="c" data-type="dpt" class="stat dpt" type="checkbox" />c
</label>
</div>
<div class="checkbox">
<label>
<input data-id="d" data-type="dpt" class="stat dpt" type="checkbox" />d
</label>
</div>
</div>
</li>
</ul>
<ul class="list">
<li data-at="foo" data-st="1" data-dpt="a">asdw</li>
<li data-at="boo" data-st="2" data-dpt="c">qwedf</li>
<li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-at="bar" data-st="3" data-dpt="b">tazxsw</li>
<li data-at="bar" data-st="1" data-dpt="b">zxcvb</li>
<li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-at="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>
上面正在对每个选择的选项执行与"逻辑.要将其更改为"OR",请使用以下内容:
The above is performing 'AND' logic on each chosen option. To change this to an 'OR', use the below:
$('.stat').on('click', function() {
var $stats = $('.stat:checked');
var $items = $('.list li');
if ($stats.length == 0) {
$items.show();
return;
}
$items.hide();
$stats.each(function() {
var $stat = $(this);
$items.filter(function() {
return $(this).data($stat.data('type')) == $stat.data('id');
}).show();
})
});
这篇关于使用具有数据属性的jquery进行多重过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!