jQuery筛选项目同时具有复选框和单击 [英] jQuery filter items with both a checkbox and click
本文介绍了jQuery筛选项目同时具有复选框和单击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个列表，我想要一个过滤器，我的复选框的工作方式如这个问题。
在我的页面上，我已经在页面顶部有一个标签，其工作方式如下面的代码和这个小提琴。
然而它们相互冲突，所以目前如果你点击xtr1而col 1的复选框被点击时，它删除所有col 1并显示所有xtr1。我希望它能够显示所有有col 1打勾的xtra1。我试图通过添加如下所示的变量addchosen来处理这个问题，但无法实现它，这怎么能实现？
< div id =nav>
< a rel =allid =all>全部< / a>
< a rel =xtr1id =xtr1> xtr1< / a>
< a rel =xtr2id =xtr2> xtr2< / a>
< a rel =xtr3id =xtr3> xtr3< / a>
< / div>
< form id =refine-cat>
< span>< input type =checkboxvalue =1name =filtercol> cat 1< / span>
< span>< input type =checkboxvalue =2name =filtercol> cat 2< / span>
< span>< input type =checkboxvalue =3name =filtercol> cat 3< / span>
< / form>
< form id =refine-col>
< span>< input type =checkboxvalue =1name =filtercat> col 1< / span>
< span>< input type =checkboxvalue =2name =filtercat> col 2< / span>
< span>< input type =checkboxvalue =3name =filtercat> col 3< / span>
< span>< input type =checkboxvalue =4name =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）;
selected = jQuery（this）.attr（rel）;
jQuery 。+。选择）.hide（）;
}）;
var $ items = jQuery（'。item'）;
var $ cats = jQuery（'＃refine-cat input [type = checkbox]'）;
var $ cols = jQuery（'＃refine-col input [type = checkbox]'）; $（变换），函数（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（selected）{
addchosen ='，。'+ selected;
}
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（'，。'））;
$ b 所以这个函数将在 nav 点击并 cols / cats 更改，如下所示：
var cats = []，cols = []，$ fitems;
var $ items = jQuery（'。item'）;
var chosen =;
函数refine（）{
$ items.show（）;
$ fitems = $ items;
if（chosen.length&&！;！='all'）{
$ fitems = $ items.filter（'。'+ selected）;
}
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）;
selected = 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' {
return'cat-'+（this.value || ||）
））。get（）;
cols = $ cols.filter（'：checked'）。map function（）{
return'col-'+（this.value ||''）
））。get（）;
refine（）;
}）;
这是您的小提琴
I have a list I want a filter, I have the checkboxes working as shown in this question.
On my page I already had the tabs at the top of the page working as shown in the below code and in this fiddle.
However they conflict with each other, so currently if you click on xtr1 while the checkbox for col 1 is clicked it removes all col 1 and shows all xtr1.
I want it to be to show all of xtra1 that have col 1 ticked for example. I tried to handle this by adding the variable addchosen as shown below, but can't get it working, how can this best be achieved?
<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>
(the list has more items in the fiddle)
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();
}
});
解决方案 I've modified your code a little bit. There is a cleaner way of doing this but I didn't wanted to change your line of thinking.
So, I've created a function named refine() and basically isolated this part of your code and added a filter for chosen also:
if(cats.length){
$fitems = $fitems.filter('.' + cats.join(', .') + addchosen );
}
if(cols.length){
$fitems = $fitems.filter('.' + cols.join(', .'));
}
So this function will be called both on nav click and cols/cats change, like this:
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();
});
Here is your fiddle
这篇关于jQuery筛选项目同时具有复选框和单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
